Highcharts图表中数据data的三种表达方式

最新推荐文章于 2018-08-15 17:02:52 发布

weixin_30439067

最新推荐文章于 2018-08-15 17:02:52 发布

阅读量718

点赞数

文章标签： javascript 数据结构与算法 json ViewUI

原文链接：http://www.cnblogs.com/heyucool/p/5202013.html

版权

　　series:[{data:[]}]中的data有三种表达方式：

数字数组
例如data:[2,4,8]，数组中的数字可以理解为y轴的值，图表的x值将会自动计算（从0开始递增，步长为1，或者是由plotOptions中的pointStart和pointInterval指定），如果xAxis坐标轴有categories，则将自动分配数组中的每个值给每个category。

<html>
<head>
  <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
  <script type="text/javascript" src="../js/highcharts.js"></script>
  <script type="text/javascript" src="../js/exporting.js"></script>
</head>

<body>
    <script type="text/javascript">
      var options1;
      options1 = {
        chart:{
          renderTo:'container1',
        },
        title:{
          text:'Number Array',
        },
        xAxis:{
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        },
        yAxis:{
          title:{
            text:'SomeValue'
          }
        },
        series:[{
          name:'marks',
          data:[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }],
      };

      var options2;
      options2={
        chart:{
          renderTo:'container2',
        },
        title:{
          text:'NumberArray Without xAxis categories'
        },
        //xAxis:{},
        //yAxis:{},
        series:[{
          data:[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }],
      };

      var options3;
      options3={
        chart:{
          renderTo:'container3'
        },
        title:{
          text:'NumberArray With plotOptions Without categories'
        },
        series:[
          {
            data:[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
          }
        ],
        plotOptions:{
          series:{
            pointStart:100,
            pointInterval:10,
          }
        }
      }

      $(function(){
        var chart1 = new Highcharts.Chart(options1);
        var chart2 = new Highcharts.Chart(options2);
        var chart3 = new Highcharts.Chart(options3);
      });
    </script>
    <div id="container1" style="min-width:800px;height:400px;"></div>
    <div id="container2" style="min-width:800px;height:400px;"></div>
    <div id="container3" style="min-width:800px;height:400px;"></div>
</body>
</html>

View Code

数字数组的数组
例如data:[[2,3],[4,1],[5,4]]，两个值的数组的数组，如果第一个值为数字，则可理解为x轴值，第二个值理解为y值，若第一个值为字符串，则其含义为该point的name，其x值默认（从0开始递增，步长为1）或由plotOptions中的pointStart和pointInterval指定。

<html>
<head>
  <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
  <script type="text/javascript" src="../js/highcharts.js"></script>
  <script type="text/javascript" src="../js/exporting.js"></script>
</head>
<body>
  <script type="text/javascript">
    var options1;
    options1={
      chart:{
        renderTo:'container1',
        type: 'spline',
      },
      series:[
          {
            name:'SE1',
            //data:[[100,2],[200,3],[300,4]],
            data:[['pointA',2],['pointB',3],['pointC',4]],
        }
      ]
    }
    $(function(){
      var chart1 = new Highcharts.Chart(options1);

    });
  </script>
  <div id="container1" style="min-width:800px;height:400px;"></div>
</body>
</html>

View Code

jsonobject的数组
例如

data: [{
	name: 'Point 1',
	color: '#00FF00',
	y: 0
}, {
	name: 'Point 2',
	color: '#FF00FF',
	y: 5
}]
可以直接指定name等属性

转载于:https://www.cnblogs.com/heyucool/p/5202013.html

weixin_30439067

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Highcharts图表中数据data的三种表达方式

　　series:[{data:[]}]中的data有三种表达方式：数字数组例如data:[2,4,8]，数组中的数字可以理解为y轴的值，图表的x值将会自动计算（从0开始递增，步长为1，或者是由plotOptions中的pointStart和pointInterval指定），如果xAxis坐标轴有categories，则将自动分配数组中的每个值给每个category。<h...
复制链接

扫一扫