highcharts柱状图和饼图的数据填充

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          });
时间: 2024-10-25 19:14:09

highcharts柱状图和饼图的数据填充的相关文章

在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图

今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. Highcharts地址:https://www.hcharts.cn/demo/highcharts,接下来我就直接上代码了. 首先是后台代码: using System; using System.Collections.Generic; using System.Linq; using System.Web

数据可视化分析(柱状图、饼图、折线图、雷达图)

分析文件’课程成绩.xlsx’,至少要完成内容: 1)每年不同班级平均成绩情况 2)不同年份总体平均成绩情况 3)不同性别学生成绩情况,并分别用合适的图表展示出三个内容的分析结果. 导入相应的库 from functools import reduce import xlrd from flask import Flask, jsonify, render_template, request, url_for from pyecharts import Line,Bar,Pie,Radar py

highcharts 柱状图 动态加载

highcharts柱状图动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="<%=request.getContextP

[转]用Matplotlib绘制 折线图 散点图 柱状图 圆饼图

Matplotlib是一个Python工具箱,用于科学计算的数据可视化.借助它,Python可以绘制如Matlab和Octave多种多样的数据图形. 安装 Matplotlib并不是Python的默认组件,需要额外安装. 官方下载地址 http://matplotlib.org/downloads.html 必须下载与自己的Python版本,操作系统类型对应的安装包.如Windows 64位+Python3.3,应该下载matplotlib-1.3.1.win-amd64-py3.3.exe 第

【ECharts】SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

1导入包,搭建SSH框架. 导入JQuery的JS包,<script src="JS/jquery-1.7.1.js"></script> 导入ECharts的包.<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script> 前提你的SSH已经搭好了,数据已经传递到了Struts层. 2在Action层,将数据封装成J

Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement Highcharts属性与Y轴数据值刻度显示Y轴最小最大值 Highcharts.setOptions({global:{useUTC : false}}); $(function(){ //声明报表对象 var chart = new Hig

Android----画柱状图和饼图

使用GraphicalView画柱状图和饼图 一.achartengine库的下载,下载地址: http://code.google.com/p/achartengine/downloads/list 下载完成后,把jar文件粘贴到libs文件夹 achartengine是为Android设计的绘图工具库. 二.在android项目中如何使用 先定义一个GraphicalView GraphicalView graphicalView; 然后,从chartfactory获取 graphicalV

dotnetcharting 生成柱状图,饼图等统计图

DotNetCharting是一个非常棒的.NET图表控件,对中文支持非常好,而且操作方便,开发快速,既有for webform 也有for winform的,而且.net1.1和2.0都有支持.官方地址是http://www.dotnetcharting.com/ 简单使用方法: 1.首先要搞定帮助文档:从官方网站下载解压后把dotnetcharting4.2for1.x目录设置成虚拟目录,.net1.1的环境,然后就可以看帮助示例了.2.把\bin\dotnetCHARTING.dll添加到

ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

本文引用自:http://blog.csdn.net/ArcticFoxHan/article/details/38071641   1.导入包,搭建SSH框架 导入Jquery的JS包,<script src="JS/jquery.1.7.1.js"></script> 导入ECharts的包.<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"