highcharts实现简单饼状图

2024-08-24 12:32

本文主要是介绍highcharts实现简单饼状图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

highcharts实现简单饼状图

/**这是饼状图的展示*/
var zc=0;
var bj=0;
var lx=0;
if($("#countzc") !=0 && $("#countzc") !="0"){zc = ($("#countzc").html()*1/($("#countzc").html()*1+$("#countbj").html()*1+$("#countlx").html()*1)).toFixed(2);
}
if($("#countbj") !=0 && $("#countbj") !="0"){bj = ($("#countbj").html()*1/($("#countzc").html()*1+$("#countbj").html()*1+$("#countlx").html()*1)).toFixed(2);
}
if($("#countlx") !=0 && $("#countlx") !="0"){lx = ($("#countlx").html()*1/($("#countzc").html()*1+$("#countbj").html()*1+$("#countlx").html()*1)).toFixed(2);
}
var sourcedata =[{'name':'正常','y':zc*1,'color':'green'},{'name':'报警','y':bj*1,'color':'red'},{'name':'离线','y':lx*1,color:'#666666'}];pieChart(sourcedata);//调用传递数据function pieChart(data) {$('#piePicture').highcharts({chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false},title: {text: ''},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: false,color: '#000000',connectorColor: '#000000',format: '<b>{point.name}</b>: {point.percentage:.1f} %'}}},series: [{type: 'pie',name: ' ',data: data}]});
}

这是highcharts柱状图的简单实现

/**这是柱状图的展示*/
var sourcePie =[{'y':$("#source1").html()*1},{'y':$("#source2").html()*1},{'y':$("#source3").html()*1},{'y':$("#source4").html()*1},{'y':$("#source5").html()*1}];
histogramPicture(sourcePie);//这是调用传递参数function histogramPicture(sourcePie) {$('#picutrePie').highcharts({chart: {type: 'column'},title: {text: ' '},subtitle: {text: ' '},xAxis: {categories: ['I','II','III','IV','VI']},yAxis: {min: 0,title: {text: ' ' //这是y轴的名称}},tooltip: {headerFormat: '<span style="font-size:10px">{point.key}</span><table>',pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +'<td style="padding:0"><b>{point.y:f} 个</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true},legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle',borderWidth: 0,                enabled:false},plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},series: [{name: '源数量',data: sourcePie}]});
}   

当highchasts需要用到时间的时候转换时间

Highcharts.setOptions({ global: { useUTC: false } });  

这篇关于highcharts实现简单饼状图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1102482

相关文章

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》:本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS?优势:应用场景:DFS配置步骤什么是DFS?DFS指的是分布式文件系统(Distr

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端:安装nfs-utils2、服务端:创建共享目录3、服

利用Python编写一个简单的聊天机器人

《利用Python编写一个简单的聊天机器人》这篇文章主要为大家详细介绍了如何利用Python编写一个简单的聊天机器人,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 使用 python 编写一个简单的聊天机器人可以从最基础的逻辑开始,然后逐步加入更复杂的功能。这里我们将先实现一个简单的

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭

Python实现高效地读写大型文件

《Python实现高效地读写大型文件》Python如何读写的是大型文件,有没有什么方法来提高效率呢,这篇文章就来和大家聊聊如何在Python中高效地读写大型文件,需要的可以了解下... 目录一、逐行读取大型文件二、分块读取大型文件三、使用 mmap 模块进行内存映射文件操作(适用于大文件)四、使用 pand