0

縦棒グラフの描画にハイチャートを使用しています

このような複数のシリーズを含む縦棒グラフがあります

ここに画像の説明を入力

これは私のコードです:

$(function () {
        var chart;
        $(document).ready(function() {
                // Radialize the colors
                Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
                    return {
                        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                        stops: [
                            [0, color],
                            [1, Highcharts.Color(color).brighten(-0.2).get("rgb")]
                        ]
                    };
                });

                chart = new Highcharts.Chart({
                chart: {
                    renderTo: "container"
                },
                title: {
                    text: "نمودار کلی عملکرد داوطلب",
                    style:
                    {
                        direction: "rtl",
                        fontSize: "16px"
                    }
                },
                yAxis: {
                    min: -33.3,
                    max: 100,
                    startOnTick: false,
                    title: {
                        enabled: true,
                        text: "درصد"
                    }
                },
                xAxis: {
                    categories: [' . implode(",", $chartCats) . ']
                },
                tooltip: {
                    formatter: function() {
                        return this.series.name+"<br/>% "+this.point.y+"<br/>";
                    }
                },
                plotOptions: {
                    column: {
                        dataLabels: {
                            enabled: true
                        },
                        pointWidth: 20
                    },
                    series: {
                        animation: {
                            duration: 3000
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                series:
                [' . $chartData . ']
            });
        });
    });

すべての列を同じ色で並べて配置するにはどうすればよいですか?

例:すべての青色の列が互いに並んでいる場合、すべての赤色の列が互いに並んでいる

4

1 に答える 1

1

一般に、このようなものはサポートされていませんが、データを異なる配列に分割できます。各列は 1 つのシリーズになり、「マスター」のシリーズにリンクされているだけです。http: //jsfiddle.net/CVvjZ/を参照してください。

もちろん、x の値を事前に計算する必要があるため、これには制限があります。

    xAxis: {
        min: 0,
        startOnTick: true,
        max: 1,
        endOnTick: true,
        categories: ['Jan', 'Feb', 'Mar']
    },
    plotOptions: {
        column: {
            grouping: false,
            pointWidth: 20
        }
    },
    series: [{
        color: colors[0],
        name: 'Tokyo',
        id: 'tokyo',
        data: [[0.3, 15]]
    }, {
        color: colors[0],
        name: 'Tokyo',
        linkedTo: 'tokyo',
        data: [[0, 10]]
    }, {
        color: colors[0],
        name: 'Tokyo',
        linkedTo: 'tokyo',
        data: [[-0.3, 10]]
    },{
        color: colors[1],
        name: 'Osaka',
        id: 'osaka',
        data: [[1.3, 15]]
    }, {
        color: colors[1],
        name: 'Osaka',
        linkedTo: 'osaka',
        data: [[1, 10]]
    }, {
        color: colors[1],
        name: 'Osaka',
        linkedTo: 'osaka',
        data: [[0.7, 10]]
    }]

2 番目の解決策もあります。値を計算する代わりにスタッキング オプションを使用する方が少し簡単です: http://jsfiddle.net/CVvjZ/1/

そしてコード：

xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: [{
        color: colors[0],
        stack: 1,
        name: 'Tokyo',
        id: 'tokyo',
        data: [15]
    }, {
        color: colors[0],
        stack: 2,
        name: 'Tokyo',
        linkedTo: 'tokyo',
        data: [15]
    }, {
        color: colors[0],
        stack: 3,
        name: 'Tokyo',
        linkedTo: 'tokyo',
        data: [11]
    },{
        color: colors[1],
        stack: 1,
        name: 'Osaka',
        id: 'osaka',
        data: [[1,12]]
    }, {
        color: colors[1],
        stack: 2,
        name: 'Osaka',
        linkedTo: 'osaka',
        data: [[1,13]]
    }, {
        color: colors[1],
        stack: 3,
        name: 'Osaka',
        linkedTo: 'osaka',
        data: [[1,14]]
    }]
于 2013-07-19T11:21:58.277 に答える