一、什么是數據列

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

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

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

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

二、數據列中的數據

在數據列的 data 屬性中，我們可以定義圖表的數據數組，通常有三種定義方式： 1、數值數組。在這種情況下，配置數組中的數值代表 Y 值，X 值則根據 X 軸的配置，要么自動計算，要么從 0 起自增，或者是根據 pointStart 及 pointInterval 自增；在分類軸中， X 值就是 categoies 配置，數值數組配置實例如下：

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

2、包含兩個值的數組集合。在這種情況下，集合中數組的第一個值代表 X， 第二個值代表 Y；如果第一個值是字符串，則代表該點的名字，并且 X 值會如 1 中所說的情況決定。數組集合的實例：

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

3、數據點對象集合。在這種情況下，集合中元素都是數據點對象，對象中可以配置數據見 plotOptions.series 或 plotOptions.{圖表類型} 所列。配置實例：

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

三、數據點及標記

在直角坐標圖（即常規的包含X、Y軸的圖表）中，數據點相當于圖表中的一個 （x,y）點。數據點的配置可以在數據列中是數據數組里指定。對于其他類型的圖表（非直角坐標圖），數據點不僅僅表示 X，Y值，例如在范圍圖中，數據點包含 x，low， high值；在 OHLC （蠟燭柱狀圖）中，數據點包含 x，open ， high， low， close；在餅圖或儀表圖中，數據點只表示一個值。

數據點配置適用所有圖表，下面的例子說明了如何指定某個點的顏色：

series : [{
    data : [ 29,9, 71.5, 106.4, 
    {
        y : 200,
        color : "#BF0B23"
    }, 194.1 , 20 ]
}] 

在直線圖、曲線圖、面積圖及面積范圍圖中可以為數據點指定標記，可以是某種形狀， 圖片等，實例：

series : [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,148.5,
    {
      y: 216.4, 
      marker: { 
          fillColor: '#BF0B23',
          radius: 10 
      }
    }, 194.1, 95.6, 54.4]
}] 

四、數據列配置

數據列共有三個級別的配置，權重從低到高依次如下：

• 配置在 plotOptions.series中
• 配置在 plotOptions.{圖表類型}中
• 配置在 series中

以上三中方式自上往下權重依次遞增的，也就是配置在 series 中的屬性會覆蓋 plotOptions 中的配置。 Highcharts API 的這種層級關系體現了 API 設計的繼承性和靈活性。

下面列舉數據列的一些常用屬性:

1、動畫（Animation）

Highcharts 圖表默認是以動畫的形式展現圖形加載過程的，可以通過 series.animation 或 plotOptions.series.animation 來指定動畫相關配置（是否啟用動畫，動畫效果等）。

2、顏色（Color）

可以通過 series.color 來指定數據列的顏色，通過 plotOptions.{圖表類型}.color 來給某一種類型的圖表設定顏色。

3、點的選擇（point Selection）

通過設置 allowPointSelect = true 可以使數據點可選擇

plotOptions: {
  series: {
    allowPointSelect: true
  }
} 

對應的獲取選中的點是通過 chart.getSelectedPoints() 函數來實現的

var selectedPoints = chart.getSelectedPoints(); 

4、線條寬度（lineWidth）

可以通過 lineWidth 來指定線條寬度

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

5、鼠標形狀（cursor）

cursor 屬性可以指定鼠標形狀，即指定當鼠標懸停在數據列上時對應的鼠標樣式（當配置了數據列點擊事件時）。

6、數據標簽（dataLables）

數據標簽指的是在數據點上顯示一些數據信息標簽

plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        }
    }
} 

數據標簽默認顯示當前數據點的點值，可以通過 formatter 函數或 format 來對其格式化。

plotOptions: {
    line: {
        dataLabels: {
            enabled: true,
            formatter: function() {
                return this.x + "	" + this.y;
            },
            // format: "{x} 	 {y}"
        }
    }
} 

7、線條樣式（Dash Style）

dashStyle 可以指定線條的樣式

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

8、zones

我們經常會遇到這樣的需求：用不同顏色標識出不同范圍的值，例如 90-100 用綠色表示，60-80 用藍色表示，小于 60用紅色表示。在 Highcharts 4.1 之前，我們可以通過 plotBands 來標識出不同范圍值對應的背景，或者用 plotLine 畫一條標識線，還可以用不同顏色標記出點的顏色，這些解決方案都有自己的用途，但在某些情景下并不是最優方案。

Via：hcharts.cn

點擊下載最新版 Highcharts

如果你想提供任何產品反饋，。

購買最新版Highcharts<>，即可擁有最新正版授權!