一、什么是數(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）中。

二、數(shù)據(jù)列中的數(shù)據(jù)

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

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

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

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

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

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

三、數(shù)據(jù)點及標記

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

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

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

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

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]
}] 

四、數(shù)據(jù)列配置

數(shù)據(jù)列共有三個級別的配置，權(quán)重從低到高依次如下：

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

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

下面列舉數(shù)據(jù)列的一些常用屬性:

1、動畫（Animation）

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

2、顏色（Color）

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

3、點的選擇（point Selection）

通過設(shè)置 allowPointSelect = true 可以使數(shù)據(jù)點可選擇

plotOptions: {
  series: {
    allowPointSelect: true
  }
} 

對應(yīng)的獲取選中的點是通過 chart.getSelectedPoints() 函數(shù)來實現(xiàn)的

var selectedPoints = chart.getSelectedPoints(); 

4、線條寬度（lineWidth）

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

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

5、鼠標形狀（cursor）

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

6、數(shù)據(jù)標簽（dataLables）

數(shù)據(jù)標簽指的是在數(shù)據(jù)點上顯示一些數(shù)據(jù)信息標簽

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

數(shù)據(jù)標簽?zāi)J顯示當前數(shù)據(jù)點的點值，可以通過 formatter 函數(shù)或 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

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

Via：hcharts.cn

點擊下載最新版 Highcharts

如果你想提供任何產(chǎn)品反饋，。

購買最新版Highcharts<>，即可擁有最新正版授權(quán)!