私は Highcharts を使用していますが、各シリーズ グループのトップ バーを異なる色にして、各グループ シリーズの 2 番目のバーをデフォルトの背景色にすることができるかどうか疑問に思っていました。
データをリロードする方法に問題があるため、色の配列を使用できません。したがって、それを行う唯一の方法はJavascriptを使用することだと思います。各カテゴリの値を取得できましたが、属性の色を変更する方法がわかりません。私はjsFiddle http://jsfiddle.net/KrTbz/13/を持っています
これが私のJavaScriptです：
function custom() {
var chart;
$(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'transparent',
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
tickLength: 0,
lineWidth: 0,
categories: ['RED',
'BLUE',
'PINK',
'ORANGE'],
title: {
text: null
},
labels: {
color: 'orange',
x: 5,
useHTML: true,
formatter: function () {
console.log(this);
return {
'RED': '1ST BAR IS RED',
'BLUE': '1ST BAR IS BLUE',
'PINK': '1ST BAR IS PINK',
'ORANGE': '1ST BAR IS ORANGE'
}[this.value];
}
}
},
yAxis: {
max: 100,
min: 0,
gridLineWidth: 0,
title: {
text: null
},
labels: {
enabled: false,
}
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: '#f60'
},
borderWidth: 0,
borderRadius: 3
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
//SERIES AND DATA ARRAY FORMAT NEEDS TO STAY THIS WAY
series: [{
color: 'silver', //DEFAULT COLOR OF SECOND BAR ON EACH GROUP
name: 'Previous',
shadow: false,
data : [10, 20, 40, 50]
}, {
color: 'silver', //DEFAULT COLOR OF SECOND BAR ON EACH GROUP
name: 'Current',
shadow: false,
data : [50, 30, 20, 10]
}]
}); //Highcharts.Chart ends
}); //function ends
}
custom();