Highcharts圖表中數據data的三種表達方式

時間 2019-11-16

標籤 highcharts 圖表數據 data 三種表達方式简体版

原文原文鏈接

　　series:[{data:[]}]中的data有三種表達方式：javascript

數字數組
例如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等屬性

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。