0
使用Highcharts 2.3.5版本，我有一個列圖設置爲百分比，堆疊顯示黑色，青色，品紅色的4列值，每個色譜柱中的黃色墨水含量百分比和100種顏色。我還在這些頂部堆疊了一系列灰色值，以填充100到容器頂部的剩餘百分比。我將x軸標籤設置爲顏色百分比。Highcharts列百分比疊加圖在v 2.3.5中破解與v 3.0.2破裂
我設置plotOptions.series.colorByPoint: true
這用v 2.3.5完美的工作，但用v 3.0.2我仍然看到x軸百分數但我看到的是4個灰色柱填充容器。無論我如何重新排列顏色或系列，我都無法讓圖表正確顯示。
$(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>