dongne1560
dongne1560
2013-07-18 20:21

如何将相同的高级系列放在一起

i am using highcharts for drawing column charts

i have a column chart with multiple series like this

enter image description here

and this is my code :

$(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 . ']
            });
        });
    });

how can i place all columns with same color beside each other?

for example : all blue columns beside each other then all red column beside each other

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • douyi3760 douyi3760 8年前

    In general something like this is not supported, however you can split data into different arrays, as each column will be one series, just linked to 'master' one, see: http://jsfiddle.net/CVvjZ/

    Of course this has limitations, since you need to pre calculate values for for 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]]
        }]
    

    There is also second solution, a little easier is to use stacking options instead of calculating values: http://jsfiddle.net/CVvjZ/1/

    And code:

    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]]
        }]
    
    点赞 评论 复制链接分享

相关推荐