如何在Highcharts条形图中创建条形图颜色的图例
如何在Highcharts条形图中创建条形图颜色的图例
提问于 2015-05-28 05:38:26
我对Highcharts条形图中的条形图使用不同的颜色来表示两组不同的数据，如下所示(缩写)：
$(function () {
$('#moduleDistribution').highcharts({
colors: ['red', 'red', '#1aadce', '#1aadce'],
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: [{
showInLegend: false,
data: [
['node', 291],
['wifi', 289],
['timer', 289],
['net', 285]
]
}]
});
});演示：http://jsfiddle.net/7Luob5k8/4/
如何创建一个图例(或类似的图例)来解释颜色的含义？我想向观众解释一下为什么有些条形是红色的，而有些则不是。
回答 1
Stack Overflow用户
发布于 2015-05-28 08:46:35
您可以通过使用2个系列来实现这一点。使它们在图例中可见。为其指定所需的颜色。在xAxis中提及类别名称，并使用x，y坐标系统将数据发送到图表。
你的分类
xAxis: {
categories: ['node', 'wifi', 'timer', 'net', 'gpio', 'file', 'uart', 'i2c', 'mqtt', 'adc', '1wire', 'bit', 'pwm', 'spi', 'u8g', 'cjson', 'ws2812', 'coap']
},您的系列将如下所示。
series: [{
data: [
[0, 291],
[1, 289],
[2, 289],
[3, 285],
[4, 284],
[5, 283],
[6, 263]
],
color: '#FF0000'
}, {
data: [
[7, 135],
[8, 119],
[9, 100],
[10, 96],
[11, 89],
[12, 80],
[13, 65],
[14, 60],
[15, 57],
[16, 46],
[17, 20]
],
color: '#1aadce'
}]Here我已经更新了你的小提琴
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30498033
复制相关文章
相似问题
更改HighCharts条形图中数据标签的颜色
条形图的Highcharts图例悬停？
matlab条形图中图例颜色的逆向排序
如何在matplotlib条形图中为所有条形图创建图例
如何在条形图中添加图例？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
