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

本文轉載自查看原文 2016-02-23 08:48 3551 highcharts

　　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等屬性

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 100種我愛你的表達方式 three.js 中的矩陣變換及兩種旋轉表達方式 layui中彈出層的兩種表達方式多尺度分析方法及表達方式二進制整數及其表達方式 python中字符串的幾種表達方式（用什么方式表示字符串） vue定義data的三種方式與區別 Python中集合數據類型之間的'交'、'差'、'並'、'補'的表達方式 qt常用圖表顯示的三種方式數據庫中的三種刪除方式