一、數(shù)據(jù)列顏色

Highcharts 中數(shù)據(jù)列的顏色是通過 colors 來指定的，colors 是個顏色值數(shù)組，默認是：

colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', 
        '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'] 

共有10個默認顏色，你可以修改顏色值或增加顏色個數(shù)來自定義圖表數(shù)據(jù)列顏色。

數(shù)據(jù)列調(diào)用顏色的方式是第 n 個數(shù)據(jù)列使用第 n 個顏色數(shù)組里的值，當序列的數(shù)量超過顏色數(shù)組的長度，后續(xù)的序列將會從頭調(diào)用。

二、柱形圖的顏色

柱形圖（包括柱狀圖、條形圖等）里一組柱形顏色是一樣的，很多人對此表示不理解

series: [{
  name: 'Tokyo',
  data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}] 

通過代碼我們知道，一組柱形是屬于同一個數(shù)據(jù)列的，所以他們的顏色當然時一樣的。

你可能想到下面的這種方法：

series: [{
    name: "Column series",
    data: [{
        y:49.9,
        color:"#ff0000"
    },
    // ... 省略代碼
    ]
}] 

這是在上一節(jié)“數(shù)據(jù)列”中說到的顏色賦值方式，用這種方法雖然可以實現(xiàn)想要的效果，但是如果分別對每個數(shù)據(jù)列賦值，顯然不合理。

highcharts 直接提供對柱形圖同數(shù)據(jù)列設置顏色，屬性是：colorByPoint

API 給出的說明是：

this option determines whether the chart should receive one color per series or one color per point. 

即 colorByPoint 決定了圖表是否給每個數(shù)據(jù)列或每個點分配一個顏色，默認值是 false， 即默認是給每個數(shù)據(jù)類分配顏色， 設置為 true 則是給每個點分配顏色。

設置 colorByPoint = true 后的效果見下圖：

其他圖形可以用 colorByPoint

• bar 條形圖
• column 柱狀圖
• columnrange 柱狀范圍圖
• heatmap 熱力圖
• treemap 樹狀圖
• waterfall 瀑布圖
• boxplot 箱線圖

三、圖表中文字顏色

圖表中所有文字都設置字體、顏色等樣式，一般是通過 style.color 來設置文字顏色的，style 里可以用的屬性如下所示：

style: {
    color: '#ff0000',
    fontSize: "12px",
    fontWeight: "blod",
    fontFamily: "Courier new"
} 

Via：hcharts.cn

點擊下載最新版 Highcharts

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

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