精品国产精品,亚洲综合系列,日韩欧美国产高清

Highcharts基礎(chǔ)教程（五）：顏色（colors）

轉(zhuǎn)帖|使用教程|編輯：鄭恭琳|2016-07-12 11:23:56.000|閱讀 6160 次

概述：本節(jié)詳細(xì)說(shuō)明了圖標(biāo)中線條顏色、文字顏色等和顏色相關(guān)的內(nèi)容。

相關(guān)鏈接：

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

Highcharts 中數(shù)據(jù)列的顏色是通過(guò) colors 來(lái)指定的，colors 是個(gè)顏色值數(shù)組，默認(rèn)是：

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

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

數(shù)據(jù)列調(diào)用顏色的方式是第 n 個(gè)數(shù)據(jù)列使用第 n 個(gè)顏色數(shù)組里的值，當(dāng)序列的數(shù)量超過(guò)顏色數(shù)組的長(zhǎng)度，后續(xù)的序列將會(huì)從頭調(diào)用。

二、柱形圖的顏色

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

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

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

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

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

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

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

API 給出的說(shuō)明是：

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

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

設(shè)置 colorByPoint = true 后的效果見(jiàn)下圖：

其他圖形可以用 colorByPoint

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

三、圖表中文字顏色

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

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

Via：hcharts.cn

點(diǎn)擊下載最新版 Highcharts

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

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

標(biāo)簽：圖表

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

上一篇：HttpWatch網(wǎng)頁(yè)數(shù)據(jù)分析工具簡(jiǎn)介及使用技巧下一篇：LeadTools中文入門教程（4）：使用OCR識(shí)別英文

相關(guān)產(chǎn)品

控件

產(chǎn)品功能：圖表

源碼：非開(kāi)源

產(chǎn)品編號(hào)：13328

當(dāng)前版本：v9.2.2 [銷售以商家最新版為準(zhǔn)，如需其他版本，請(qǐng)來(lái)電咨詢]

開(kāi) 發(fā) 商： Highsoft

正式授權(quán)

">Highcharts

純JavaScript編寫的開(kāi)源圖表庫(kù)，為你的Web應(yīng)用程序提供直觀的、交互式圖表

最新文章 MORE

金喜正規(guī)買球相關(guān)的文章 MORE

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

金喜正规买球

在線采購(gòu)

中文文檔庫(kù)

試用/Demo下載

開(kāi)發(fā)社群

Highcharts基礎(chǔ)教程（五）：顏色（colors）

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

二、柱形圖的顏色

三、圖表中文字顏色

用科技創(chuàng)就卓越

Create excellence with technology

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

金喜正规买球

在線采購(gòu)

中文文檔庫(kù)

試用/Demo下載

開(kāi)發(fā)社群

Highcharts基礎(chǔ)教程（五）：顏色（colors）

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

二、柱形圖的顏色

三、圖表中文字顏色

為你推薦

用科技創(chuàng)就卓越

Create excellence with technology

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

三、圖表中文字顏色