Highcharts學(xué)習(xí)之?dāng)?shù)據(jù)列

更新時間：2016年08月03日 14:47:03 投稿：daisy

數(shù)據(jù)列配置是 Highcharts 最復(fù)雜也是最靈活的配置，如果說 Highcharts 是靈活多變，細節(jié)可定制的話，那么數(shù)據(jù)列配置就是這個重要特性的核心。

什么是數(shù)據(jù)列

數(shù)據(jù)列是一組數(shù)據(jù)集合，例如一條線，一組柱形等。圖表中所有點的數(shù)據(jù)都來自數(shù)據(jù)列對象，數(shù)據(jù)列的基本構(gòu)造是：

series : [{
  name : '',
  data : []
}]

提示：數(shù)據(jù)列配置是個數(shù)組，也就是數(shù)據(jù)配置可以包含多個數(shù)據(jù)列。

數(shù)據(jù)列中的 name 代表數(shù)據(jù)列的名字，并且會顯示在數(shù)據(jù)提示框（Tooltip）及圖例（Legend）中

tags:

1.數(shù)據(jù)列中的數(shù)據(jù)填充：

方法一：一維數(shù)組

如果有categories屬性的話就是使用一維數(shù)組

data : [1, 4, 6, 9, 10]

方法二：二維數(shù)組

如果沒有categories屬性的話就是使用二維數(shù)組

data ： [ [5, 2], [6,3], [8,2] ]

方法三：集合

series:[{
  data : [{
  name : "point 1",
  color : "#00ff00",
  y : 0
  }, {
  name : "Point 2",
  color : "#ff00ff",
  y : 5
 }]
}]

2.線條寬度（lineWidth）：

將線條的寬度改為5px默認(rèn)為1px

series: [{
 data: [216.4, 194.1, 95.6],
 lineWidth: 5
}]

3.數(shù)據(jù)標(biāo)簽（dataLables）：

plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
              }
      }
    },

4.線條樣式（Dash Style）:

series: [{
      data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
      dashStyle: 'longdash'
    }, {
      data: [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],
      dashStyle: 'shortdot'
    }]

5.Zoom

series:[{
        name:"a",
        data:[1,2,3],
        zoneAxis: 'x',  //指定作用于哪個軸
        zones: [{
      value: 1.7,
      color:'#90ed7d'//這兩個屬性是可以放在一起的但不能和dashStyle放在一起
        }, {
          dashStyle: 'dot'
        }]
      }]

以上就是本文的全部內(nèi)容，在 Highcharts 中，數(shù)據(jù)列的配置是個非常重要的配置，同時又由于可配置的屬性非常對，配置的靈活性非常高，需要大家自己自己體會和理解。

您可能感興趣的文章: