0
버전 2.3.5의 Highcharts에서 필자는 백분율로 설정된 세로 막 대형 차트를 사용하여 검정, 시안 색, 마젠타 색의 4 열 값을 표시합니다. , 100 열 중 노란색 잉크 수준 비율 및 각 열에 대한 개별 색상이 포함됩니다. 또한 컨테이너 상부에 남아있는 백분율을 100으로 채우기 위해 이들 위에 일련의 회색 값을 쌓습니다. x 축 레이블을 색상 비율로 설정합니다. 하이 차트 열 차트 누적 비율이 v 2.3.5로 변경되었습니다. 3.0.2
나는이 V 2.3.5와 함께 완벽하게 작동하지만, V 3.0.2로 난 아직도 x 축 비율을 볼 수 있지만 내가 보는 모든 컨테이너를 채우는 4 개 회색 막대입니다plotOptions.series.colorByPoint: true
을 설정합니다. 색상이나 시리즈를 어떻게 재 배열했는지에 관계없이 차트가 올바르게 표시되지 않습니다.
$(function() {
var row1values = {
"Black": 78,
"Cyan": 55,
"Magenta": 33,
"Yellow": 90
};
var row1inverseValues = {
"Black": 22,
"Cyan": 45,
"Magenta": 77,
"Yellow": 10
};
var options = {
credits: {
enabled: false
},
chart: {
renderTo: "container",
type: "column",
animation: false,
spacingTop: 7,
spacingRight: 0,
spacingLeft: 0,
backgroundColor: "#fff"
},
colors: ["#f5f5f5", "#f5f5f5", "#f5f5f5", "#f5f5f5", "#282521", "#91cfcf", "#be4e95", "#f2f000"],
legend: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: [row1values.Black, row1values.Cyan, row1values.Magenta, row1values.Yellow],
lineWidth: 0,
tickLength: 0,
},
yAxis: {
min: 0,
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0
},
plotOptions: {
series: {
colorByPoint: true,
pointPadding: 0.02,
groupPadding: 0.02
},
column: {
stacking: "percent",
animation: false,
enableMouseTracking: false,
borderWidth: 0,
shadow: false
},
area: {
dataLabels: {
enabled: false
}
}
},
series: [{
data: [row1inverseValues.Black, row1inverseValues.Cyan, row1inverseValues.Magenta, row1inverseValues.Yellow]
}, {
data: [row1values.Black, row1values.Cyan, row1values.Magenta, row1values.Yellow]
}]
};
new Highcharts.Chart(options);
});
V 2.3.5 http://jsfiddle.net/SixEight/rptEf/
<script src="http://code.highcharts.com/2.3.5/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
V 3.0.2 http://jsfiddle.net/SixEight/KDG5y/
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>