0

在 Highcharts 2.3.5 版中，我有一个设置为百分比和堆叠的柱形图，显示 4 列值，分别表示 100 种黑色、青色、洋红色和黄色墨水水平百分比以及每列的单独颜色。我还在这些顶部堆叠了一系列灰度值，以填充 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);
});

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>
4

1 回答 1

1

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

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

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

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

于 2013-07-04T09:58:29.313 回答