highcharts柱状图和饼图的数据填充
数据 填充 柱状图 HighCharts
2023-09-27 14:29:03 时间
1、其实数据填充很简单,它们就是json的格式,然后后台按照这种格式去套数据发给前端;前端再做一下连接处理等就行了。
1 $('#program_statistics_bar').highcharts({ 2 chart: { 3 type: 'bar' 4 }, 5 title: { 6 text: bar_title 7 }, 8 exporting :{ 9 url:'../../plugin common/Highcharts-3.0.9/exporting-server/php/php-batik/index.php', 10 width:1000 11 }, 12 xAxis: { 13 categories: (function() { 14 var temp_data = []; 15 16 for (var key in bar_data) 17 { 18 if ('undefined' != typeof(bar_prog_name[key])) 19 { 20 temp_data.push(bar_prog_name[key].toString() + '( ' + key.toString() + ' )'); 21 } 22 else 23 { 24 temp_data.push(key.toString()); 25 } 26 } 27 28 return temp_data; 29 })() 30 }, 31 yAxis: { 32 min: 0, 33 title: { 34 text: 'View Count' + '( ' + bar_type + ' : ' + number + ' )', 35 align: 'high' 36 }, 37 labels: { 38 overflow: 'justify' 39 } 40 }, 41 tooltip: { 42 valueSuffix: ' times' 43 }, 44 plotOptions: { 45 bar: { 46 dataLabels: { 47 enabled: true 48 } 49 } 50 }, 51 legend: { 52 layout: 'vertical', 53 align: 'right', 54 verticalAlign: 'top', 55 x: -40, 56 y: 100, 57 floating: true, 58 borderWidth: 1, 59 backgroundColor: '#FFFFFF', 60 shadow: true 61 }, 62 credits: { 63 enabled: false 64 }, 65 series: (function() { 66 var obj = new Object(); 67 var view_count = []; 68 var temp_data = []; 69 70 for (var key in bar_data) 71 { 72 view_count.push(bar_data[key]); 73 } 74 75 obj['name'] = "View Count"; 76 obj['data'] = view_count; 77 78 temp_data.push(obj); 79 return temp_data; 80 })() 81 });
1 $('#program_statistics_pie').highcharts({ 2 chart: { 3 plotBackgroundColor: null, 4 plotBorderWidth: null, 5 plotShadow: false 6 }, 7 colors:[ 8 '#DDDDDD', 9 '#FF88C2', 10 '#FF8888', 11 '#FFA488', 12 '#FFBB66', 13 '#FFDD55', 14 '#FFFF77', 15 '#DDFF77', 16 '#66FF66', 17 '#77FFEE', 18 '#77DDFF', 19 ], 20 title: { 21 text: pie_title 22 }, 23 tooltip: { 24 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 25 }, 26 plotOptions: { 27 pie: { 28 allowPointSelect: true, 29 cursor: 'pointer', 30 dataLabels: { 31 enabled: true, 32 color: '#000000', 33 connectorColor: '#000000', 34 format: '<b>{point.name}</b>: {point.percentage:.1f} %' 35 }, 36 showInLegend: true 37 } 38 }, 39 series: [{ 40 type: 'pie', 41 name: 'Views', 42 data: (function() { 43 var temp_data = []; 44 45 for (var key in pie_data) 46 { 47 if ('undefined' != typeof(pie_prog_name[key])) 48 { 49 arr = [pie_prog_name[key] + '( ' + key + ' )', pie_data[key]]; 50 } 51 else 52 { 53 arr = [key, pie_data[key]]; 54 } 55 56 temp_data.push(arr); 57 } 58 59 return temp_data; 60 })() 61 }] 62 });
相关文章
- mysql binary like_MYSQL的binary解决mysql数据大小写敏感问题的方法
- python pd.read_excel读取多级目录exel表格xlsx数据,进行类别一对一填充和映射
- 二道题:分组顺序向下填充 和 标注数据整理
- Hudi-Flink SQL实时读取kafka数据写入Hudi表
- faker php伪造填充数据
- stm32 F40x CCM数据区的使用
- SPU表管理之更新SPU表数据
- 爬虫之常用数据解析方法
- Vue - 列表分页懒加载 / 点击 “加载更多“ 按钮请求接口数据(如何实现类似用户手动点击 “查看更多“ ,然后请求分页懒加载数据填充)可适用于 Nuxt.js 、uni-app 等 Vue.js
- 【大数据新手上路】“零基础”系列课程--日志服务(Log Service)采集 ECS 日志数据到 MaxCompute
- MVC客户端使用 Mustache.js把json数据填充到模版中
- vue 组件 模板input双向数据数据
- 数据运营系统实现方案浅析
- 《R语言与数据挖掘最佳实践和经典案例》—— 2.3 从SAS中导入数据
- C# winform combobox 在绑定数据之后插入一项选择项
- 20. python爬虫——基于CrawlSpider爬取凤凰周刊新闻资讯专栏全部页码页面数据
- Springboot导出word,动态填充表格数据
- 这个网站做数据科学家的FB 但除了社交还做实事
- FBI非法向第三方分享了其收集到的美国人数据
- 俄网络安全公司将出售俄罗斯黑客数据