0

バージョン 2.3.5 の Highcharts では、縦棒グラフをパーセンテージに設定して積み上げ、100 のうち黒、シアン、マゼンタ、イエローのインク レベルのパーセンテージを 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);
});

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

色は、各ポイントではなく、系列の色の順序を定義します。したがって、あなたの場合、2番目のシリーズの各ポイントに色を設定することをお勧めします.

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

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

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

于 2013-07-04T09:58:29.313 に答える