Question

对于Highcharts的2.3.5版本，我将柱形图设置为百分比和堆叠，显示4列的值，分别为黑色，青色，品红色和黄色墨水量百分比，以及每列的单独颜色。我还在这些上方堆叠了一系列灰色值，以将100中剩余的百分比填充到容器的顶部。我将x轴标签设置为颜色百分比。

我设置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);
});

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>

Answer 1

颜色定义系列颜色的顺序，而不是每个点。所以在你的情况下，我建议为第二系列中的每个点设置颜色。

{
                        y: row1values.Black,
                        color:'#282521'
                    }

http://jsfiddle.net/KDG5y/7/

http://api.highcharts.com/highcharts#colors

Highcharts列百分比叠加图表在v 2.3.5中使用v 3.0.2打破

1 个答案: