javascript - 如何为高图表饼设置单独的颜色
问题描述
我可以通过传递series data.
这为高图表分配随机或主题颜色来获得高图表工作。
在以下示例中,我可以看到浅蓝色、黑色和绿色。但是如何设置预定义的颜色。例如,我想改用橙色、红色和黄色。
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
解决方案
您可以使用如下所示setOptions
的颜色。Highcharts
Highcharts.setOptions({
colors: ['#ff6600', '#ff0000', '#ffff00']
});
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
推荐阅读
- c# - 需要在 FlipView 中的图像顶部绘制矩形,但 FlipView 一次加载 3 个图像
- postman - 当内容返回 204 时,是否有针对 Postman 错误的解决方法?
- python - 通过套接字从 tkinter 发送输入
- react-native - com.android.ide.common.process.ProcessException:无法执行 aapt 错误
- json - for循环不允许我循环一个json对象的整个request.post!节点.js
- android - 页脚按钮/链接在移动 Chrome 上变得无响应(Android 上的 v67.0.3396.68)
- cobol - COBOL-根据变量向字符串添加字符数
- c++ - 如何修复 OpenMP 程序的 gdb 运行中的线程数
- scala - Spark:报告集群的总量和可用内存
- r - R:RF模型中的混淆矩阵返回错误:data`和`reference`应该是具有相同水平的因素