# 數據列（Series） > 數據列配置是 Highcharts 最復雜也是最靈活的配置，如果說 Highcharts 是靈活多變，細節可定制的話，那么數據列配置就是這個重要特性的核心 ### 一、什么是數據列 數據列是一組數據集合，例如一條線，一組柱形等。圖表中所有點的數據都來自數據列對象，數據列的基本構造是： ``` series : [{ name : '', data : [] }] ``` 提示：數據列配置是個數組，也就是數據配置可以包含多個數據列。 數據列中的 `name` 代表數據列的名字，并且會顯示在數據提示框（Tooltip）及圖例（Legend）中。 ### 二、數據列中的數據 在數據列的 `data` 屬性中，我們可以定義圖表的數據數組，通常有三種定義方式： 1、數值數組。在這種情況下，配置數組中的數值代表 Y 值，X 值則根據 X 軸的配置，要么自動計算，要么從 0 起自增，或者是根據 `pointStart` 及 `pointInterval` 自增；在分類軸中， X 值就是 `categoies` 配置，數值數組配置實例如下： ``` data : [1, 4, 6, 9, 10] ``` [在線試一試](http://code.hcharts.cn/demos/hhhhxL) 2、包含兩個值的數組集合。在這種情況下，集合中數組的第一個值代表 X， 第二個值代表 Y；如果第一個值是字符串，則代表該點的名字，并且 X 值會如 **1** 中所說的情況決定。數組集合的實例： ``` data ： [ [5, 2], [6,3], [8,2] ] ``` [在線試一試](http://code.hcharts.cn/demos/hhhhxw)?（注意例子是 x y 軸對調的） 3、數據點對象集合。在這種情況下，集合中元素都是數據點對象，對象中可以配置數據見 [`plotOptions.series`](http://www.hcharts.cn/api/index.php#plotOptions.series) 或 plotOptions.{圖表類型} 所列。配置實例： ``` data : [{ name : "point 1", color : "#00ff00", y : 0 }, { name : "Point 2", color : "#ff00ff", y : 5 }] ``` [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhav) 另外，通過這種方式還可以增加額外變量，詳見例子：[增加額外變量](http://www.hcharts.cn/demo/index.php?p=93) ### 三、數據點及標記 在直角坐標圖（即常規的包含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] }] ``` 更多關于數據點標記見API文檔：[http://www.hcharts.cn/api/index.php#plotOptions.series.marker](http://www.hcharts.cn/api/index.php#plotOptions.series.marker) ### 四、數據列配置 數據列共有三個級別的配置，權重從低到高依次如下： * 配置在 plotOptions.series 中 對應的 API 為：[http://www.hcharts.cn/api/index.php#plotOptions.series](http://www.hcharts.cn/api/index.php#plotOptions.series) 中，針對所有類型圖表有效，一般是通用配置。 * 配置在 plotOptions.{圖表類型} 中 對應的 API 為 ： [http://www.hcharts.cn/api/index.php#plotOptions](http://www.hcharts.cn/api/index.php#plotOptions) 下的指定圖表類型，針對當前類型圖表有效，一般是某一種圖表的通用配置。 * 配置在 series 中 對應的 API 為：[http://www.hcharts.cn/api/index.php#series，](http://www.hcharts.cn/api/index.php#series%EF%BC%8C) 針對當前數據列有效 以上三中方式自上往下權重依次遞增的，也就是配置在 series 中的屬性會覆蓋 plotOptions 中的配置。 Highcharts API 的這種層級關系體現了 API 設計的繼承性和靈活性。 相關內容：[論壇帖子](http://bbs.hcharts.cn/thread-397-1-1.html) 下面列舉數據列的一些常用屬性 #### 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(); ``` [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhaA) 提示：按住 CTRL 或 SHIFT 鍵可以多選 #### 4、線條寬度（lineWidth）  可以通過 lineWidth 來指定線條寬度 ``` series: [{ data: [216.4, 194.1, 95.6], lineWidth: 5 }] ``` [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhha2) #### 5、鼠標形狀（cursor） cursor 屬性可以指定鼠標形狀，即指定當鼠標懸停在數據列上時對應的鼠標樣式（當配置了數據列點擊事件時）。 #### 6、數據標簽（dataLables） ####  數據標簽指的是在數據點上顯示一些數據信息標簽，對應的 API 為 [http://www.hcharts.cn/api/index.php#series.data.dataLabels](http://www.hcharts.cn/api/index.php#series.data.dataLabels) ``` plotOptions: { line: { dataLabels: { enabled: true } } } ``` 數據標簽默認顯示當前數據點的點值，可以通過 `formatter` 函數或 `format` 來對其格式化。 ``` plotOptions: { line: { dataLabels: { enabled: true, formatter: function() { return this.x + " " + this.y; }, // format: "{x} {y}" } } } ``` [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhak) #### 7、線條樣式（Dash Style）  dashStyle 可以指定線條的樣式 ``` series: [{ data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6], dashStyle: 'longdash' }] ``` [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhaW) #### 8、zones 我們經常會遇到這樣的需求：用不同顏色標識出不同范圍的值，例如 90-100 用綠色表示，60-80 用藍色表示，小于 60用紅色表示。在 Highcharts 4.1 之前，我們可以通過 plotBands 來標識出不同范圍值對應的背景（效果見[實例](http://www.hcharts.cn/demo/index.php?p=15)），或者用 plotLine 畫一條標識線（見[教程](http://www.hcharts.cn/docs/index.php?doc=basic-plotLines)），還可以用不同顏色標記出點的顏色，這些解決方案都有自己的用途，但在某些情景下并不是最優方案。 Highcharts 4.1 增加了一個非常牛逼的新特性：Zones，先來看個例子： <iframe width="100%" height="440" src="http://code.hcharts.cn/hcharts.cn/hhhhco/result,js,html" allowfullscreen="allowfullscreen" frameborder="0"></iframe> 對應的代碼也很簡單： ``` $(function() { $('#container').highcharts({ series: [{ data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5], zones: [{ value: 0, color: '#f7a35c', dashStyle: 'dot' }, { value: 10, color: '#7cb5ec' }, { color: '#90ed7d' }] }] }); }); ``` [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhco/) 可以看到 Zones 是個數組，常見的屬性有 value，color，dashStyle * value 表示對超過這個值的區域有效 * color 對當前范圍設置顏色 * dashStyle 對當前范圍設置線條顏色 * fillColor 對當前范圍設置填充顏色（針對面積圖） zones 默認的是針對 Y 軸，可以通過 zoneAxis = x 來指定當前配置是針對 x 軸，實例： ``` $(function() { $('#container').highcharts({ title: { text: 'Zone with dash style' }, subtitle: { text: 'Dotted line typically signifies prognosis' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, 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], zoneAxis: 'x', zones: [{ value: 8 }, { dashStyle: 'dot' }] }] }); }); ``` [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhaa) 提示： 1、對于 x 軸的 zones 的 value 值表示的是 x 軸下標 2、zones 數組里的每個對象具有繼承性，相同的屬性會覆蓋前一個配置 在 Highcharts 中，數據列的配置是個非常重要的配置，同時又由于可配置的屬性非常對，配置的靈活性非常高，需要大家自己自己體會和理解，關于數據陪的詳細配置將會在【圖表類型章節詳細說明】 * * * （正文完，最后更新時間：2015-09-10 13:45:09）