Highcharts 플러그인을 사용하여 막대 차트를 만들고 있는데 막대 색상이 아닌 막대 차트의 배경색을 동적으로 변경하고 싶습니다.
기본적으로 2 가지 테마가 있습니다. 1은 흰색이고 다른 하나는 검은 색입니다. 검은 색을 선택하면 막대 차트의 배경색이 검은 색으로 변경되고 흰색을 선택하면 흰색으로 변경됩니다. Highcharts 플러그인에서 검색했지만 배경색을 동적으로 변경하는 방법을 찾을 수 없습니다.
이 문제를 해결하도록 도와주세요. 어떻게해야할지 모르겠습니다.
다음은 막대 차트의 코드입니다. http://jsfiddle.net/8eJ4p/85/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
backgroundColor: "#000"
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
enabled: false
},
labels: {
enabled: false
}
},
legend: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
if(this.series.name != 'Filler')
return Math.round(this.percentage) + '%';
else return "";
}
}
},
series: {
pointWidth: 18,
stacking: 'percent',
dataLabels: {
enabled: true,
inside: true,
align: 'right',
color: '#fff'
}
}
},
tooltip: {
useHTML: true,
shared: true,
formatter: function() {
return '<i>' + this.points[1].x +'</i>: <b>'+ Math.round(this.points[1].percentage) +'%</b>';
}
},
series: [{
name: 'background filler',
data: [7, 9, 8, 5, 10]
}, {
name: 'actual Value',
data: [5, 3, 4, 7, 2]
}]
});
});
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="white" style="width: 60px; height: 20px; margin: 5px;float:left; background-color:skyblue;cursor:pointer">White</div>
<div id="black" style="width: 60px; height: 20px; margin: 5px;background-color:red;float:left;cursor:pointer">Black</div>
<div id="container" style="min-width: 310px; height: 250px; margin: 0 auto"></div>Highcharts 배경은에 저장되며 chart.chartBackground수동으로 업데이트 할 수 있습니다.
chart.chartBackground.attr({
fill: new_color
});
라이브 데모 : http://jsfiddle.net/uwwgfu3a/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다