如何将bg颜色用于highchart中的每个条形图
如何将bg颜色用于highchart中的每个条形图
提问于 2014-11-03 20:25:31
$(function() {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
max: 10,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
你可以看到data..Now的蓝色表示，例如，在葡萄中，剩余的(10-7=3)我想用绿色表示。数据看起来应该是蓝色的，其余未使用的部分应该是绿色的。它应该像条的背景颜色，因为我不喜欢给另一个数据系列。
回答 1
Stack Overflow用户
发布于 2014-11-03 20:51:47
Highcharts栏没有背景颜色，所以我不认为您可以在不创建另一个系列(或修改Highcharts代码)的情况下这样做。
你只需几行代码就可以动态创建一个“剩余部分”系列：
chartConfig.series.push({
name: 'Remainder',
index: 0,
data: chartConfig.series[0].data.map(function(value) { return maxFruit - value })
})http://jsfiddle.net/s261qdfr/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26714308
复制相关文章
相似问题
腾讯云开发者
