首页 > 代码库 > Highcharts使用指南

Highcharts使用指南

2024-07-12 06:30:38   225人阅读

统计分析报表Highcharts使用指南

一、前言（Preface）阅览本文，您可以了解：
1、Highcharts使用方法
2、Highcharts数据动态加载
3、Highcharts自动刷新数据
4、Highcharts常用模板
二、引用Highcharts的JS

  1. <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  2. <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>
  3.                 <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/modules/exporting.js"></script>
复制代码

三、静态图表示例

  1. var chart1; // 全局变量
  2. $(document).ready(function() {
  3.       chart1 = new Highcharts.Chart({
  4.         chart: {
  5.             renderTo: ‘container‘,
  6.             type: ‘bar‘
  7.         },
  8.         title: {
  9.             text: ‘Fruit Consumption‘
  10.         },
  11.         xAxis: {
  12.             categories: [‘Apples‘, ‘Bananas‘, ‘Oranges‘]
  13.         },
  14.         yAxis: {
  15.             title: {
  16.               text: ‘Fruit eaten‘
  17.             }
  18.         },
  19.         series: [{
  20.             name: ‘Jane‘,
  21.             data: [1, 0, 4]
  22.         }, {
  23.             name: ‘John‘,
  24.             data: [5, 7, 3]
  25.         }]
  26.       });
  27.   });
复制代码

四、动态图表示例(动态加载数据)(1)定义基本的初始的参数

  1. var options = {
  2.     chart: {
  3.         renderTo: ‘container‘,
  4.         defaultSeriesType: ‘column‘
  5.     },
  6.     title: {
  7.         text: ‘Fruit Consumption‘
  8.     },
  9.     xAxis: {
  10.         categories: []
  11.     },
  12.     yAxis: {
  13.         title: {
  14.             text: ‘Units‘
  15.         }
  16.     },
  17.     series: []
  18. };
复制代码

(2)动态加入数据

  1. $("#b1").click(function(){
  2.         var ddate={
  3.                 name: ‘China‘,
  4.                 data: [Math.random()*10, Math.random()*10, Math.random()*10]
  5.         };
  6.         options.series.push(ddate);
  7.         var chart = new Highcharts.Chart(options);
  8. });
复制代码

五、自动刷新

  1. function requestData() {
  2.     $.ajax({
  3.         url: ‘‘,
  4.         success: function(data) {
  5.             var series = chart.series[0],
  6.                 shift = series.data.length > 20; // shift if the series is longer than 20
  8.             // add the point
  9.             chart.series[0].addPoint(point, true, shift);
  10.            
  11.             // call it again after one second
  12.             setTimeout(requestData, 1000);   
  13.         },
  14.         cache: false
  15.     });
  16. }
复制代码

六、常用模板(1)折线图

  1. var options  = {
  2.         chart: {
  3.                 renderTo: ‘container‘,
  4.                 type: ‘line‘,
  5.                 marginRight: 130,
  6.                 marginBottom: 25
  7.         },
  8.         title: {
  9.                 text: ‘Monthly Average Temperature‘,
  10.                 x: -20 //center
  11.         },
  12.         subtitle: {
  13.                 text: ‘Source: WorldClimate.com‘,
  14.                 x: -20
  15.         },
  16.         xAxis: {
  17.                 categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘,
  18.                         ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]
  19.         },
  20.         yAxis: {
  21.                 title: {
  22.                         text: ‘Temperature (°C)‘
  23.                 },
  24.                 plotLines: [{
  25.                         value: 0,
  26.                         width: 1,
  27.                         color: ‘#808080‘
  28.                 }]
  29.         },
  30.         tooltip: {
  31.                 formatter: function() {
  32.                                 return ‘<b>‘+ this.series.name +‘</b><br/>‘+
  33.                                 this.x +‘: ‘+ this.y +‘°C‘;
  34.                 }
  35.         },
  36.         legend: {
  37.                 layout: ‘vertical‘,
  38.                 align: ‘right‘,
  39.                 verticalAlign: ‘top‘,
  40.                 x: -10,
  41.                 y: 100,
  42.                 borderWidth: 0
  43.         },
  44.         series: []
  45. };
复制代码

调用方法：

  1. $("#b1").click(function(){
  2.         var chart = new Highcharts.Chart(options);//或者 $(‘#container‘).highcharts(options);
  3. });
复制代码

(2)柱状图

  1. var options={
  2.         chart: {
  3.             type: ‘column‘
  4.         },
  5.         title: {
  6.             text: ‘Monthly Average Rainfall‘
  7.         },
  8.         subtitle: {
  9.             text: ‘Source: WorldClimate.com‘
  10.         },
  11.         xAxis: {
  12.             categories: [
  13.                 ‘Jan‘,
  14.                 ‘Feb‘,
  15.                 ‘Mar‘,
  16.                 ‘Apr‘,
  17.                 ‘May‘,
  18.                 ‘Jun‘,
  19.                 ‘Jul‘,
  20.                 ‘Aug‘,
  21.                 ‘Sep‘,
  22.                 ‘Oct‘,
  23.                 ‘Nov‘,
  24.                 ‘Dec‘
  25.             ]
  26.         },
  27.         yAxis: {
  28.             min: 0,
  29.             title: {
  30.                 text: ‘Rainfall (mm)‘
  31.             }
  32.         },
  33.         tooltip: {
  34.             headerFormat: ‘<span style="font-size:10px">{point.key}</span><table>‘,
  35.             pointFormat: ‘<tr><td style="color:{series.color};padding:0">{series.name}: </td>‘ +
  36.                 ‘<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>‘,
  37.             footerFormat: ‘</table>‘,
  38.             shared: true,
  39.             useHTML: true
  40.         },
  41.         plotOptions: {
  42.             column: {
  43.                 pointPadding: 0.2,
  44.                 borderWidth: 0
  45.             }
  46.         },
  47.         series: [{
  48.             name: ‘Tokyo‘,
  49.             data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  51.         }, {
  52.             name: ‘New York‘,
  53.             data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
  55.         }, {
  56.             name: ‘London‘,
  57.             data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
  59.         }, {
  60.             name: ‘Berlin‘,
  61.             data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
  63.         }]
  64.     }
复制代码

调用方法：

  1. $("#b1").click(function(){
  2.         $(‘#container‘).highcharts(options);
  3. });
复制代码

(3)饼图

  1. var options  = {
  2.         chart: {
  3.             plotBackgroundColor: null,
  4.             plotBorderWidth: null,
  5.             plotShadow: false
  6.         },
  7.         title: {
  8.                 text: ‘Monthly Average Temperature‘,
  9.                 x: -20 //center
  10.         },
  11.         subtitle: {
  12.                 text: ‘Source: WorldClimate.com‘,
  13.                 x: -20
  14.         },
  15.         tooltip: {
  16.                 pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘
  17.         },
  18.     plotOptions: {
  19.         pie: {
  20.             allowPointSelect: true,
  21.             cursor: ‘pointer‘,
  22.             dataLabels: {
  23.                 enabled: true,
  24.                 color: ‘#000000‘,
  25.                 connectorColor: ‘#000000‘,
  26.                 format: ‘<b>{point.name}</b>: {point.percentage:.1f} %‘
  27.             }
  28.         }
  29.     },
  30.     series: [{
  31.         type: ‘pie‘,
  32.         name: ‘Browser share‘,
  33.         data: [
  34.             [‘Firefox‘,  45.0],
  35.             [‘IE‘,      26.8],
  36.             {
  37.                 name: ‘Chrome‘,
  38.                 y: 12.8,
  39.                 sliced: true,
  40.                 selected: true
  41.             },
  42.             [‘Safari‘,    8.5],
  43.             [‘Opera‘,    6.2],
  44.             [‘Others‘,  0.7]
  45.         ]
  46.     }]
  47. };
复制代码

调用方法：

  1. $("#b1").click(function(){
  2.         $(‘#container‘).highcharts(options);
  3. });
复制代码


联系
我们