zoukankan html css js c++ java

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

　　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-800px;height:400px;"></div>
    <div id="container2" style="min-800px;height:400px;"></div>
    <div id="container3" style="min-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-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等属性

查看全文

相关阅读:
Android Studio 2.3.1导出jar文件不能生成release解决办法
 AndroidStudio 3.0 生成jar包的方法
 Android Studio如何打jar包
 Android Studio 如何打JAR包（修订版）
6款程序员必备的开源中文处理工具
 Qt5.8 下链接 Mysql 错误以及解决方法（无论 Mysql 是什么版本的，64 位 Qt 要用 64 位的 Mysql 驱动，32 位的 Qt 要用 32 位的Mysql 驱动）
Go 语言如果按这样改进，能不能火过 Java？
基于 CSP 的设计思想和 OOP 设计思想的异同
 DELPHI下多线程编程的几个思维误区（QDAC）
如何使用表单

原文地址：https://www.cnblogs.com/heyucool/p/5202013.html