最后修改时间:2020-11-20 11:35
本节详细说明了图标中线条颜色、文字颜色等和颜色相关的内容。
Highcharts 中数据列的颜色是通过 colors
来指定的,colors 是个颜色值数组,默认是:
colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1']
共有 10个默认颜色,你可以修改颜色值或增加颜色个数来自定义图表数据列颜色。
数据列调用颜色的方式是第 n 个数据列使用第 n 个颜色数组里的值,当序列的数量超过颜色数组的长度,后续的序列将会从头调用。
柱形图(包括柱状图、条形图等)里一组柱形颜色是一样的,很多人对此表示不理解
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]
}]
通过代码我们知道,一组柱形是属于同一个数据列的,所以他们的颜色当然时一样的。
你可能想到下面的这种方法:
series: [{
name: "Column series",
data: [{
y:49.9,
color:"#ff0000"
},
// ... 省略代码
]
}]
这是在上一节“数据列”中说到的颜色赋值方式,用这种方法虽然可以实现想要的效果,但是如果分别对每个数据列赋值,显然不合理。
Highcharts 直接提供对柱形图同数据列设置颜色,属性是:colorByPoint
colorByPoint 决定了图表是否给每个数据列或每个点分配一个颜色,默认值是 false, 即默认是给每个数据类分配颜色,
设置为 true 则是给每个点分配颜色。
设置 colorByPoint = true 后的效果见下图:
通过搜索 API 文档可以知道其他图表也可以用到 colorByPoint 这个属性
注:API 文档搜索功能很强大,请好好利用
图表中所有文字都设置字体、颜色等样式,一般是通过 style.color
来设置文字颜色的,style 里可以用的属性如下所示:
style: {
color: '#ff0000',
fontSize: "12px",
fontWeight: "blod",
fontFamily: "Courier new"
}
下面列举图表中常见文字的配置位置:
图表中任何文字都是可以精准控制,如需设置,请自行在API文档上搜索
本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22