如何在Highcharts中独立地重叠数据列

Question

我想拥有与下面的图片相似的东西，但是表示类的列现在全部堆叠在一起。如何分离它们并允许它们动态加载？

而且我还需要一个传说，说绿色是乐队1，黄色是乐队2，橙色是乐队3，红色是乐队4，我该怎么做呢？我的代码在JS Fiddle页面中。我不允许使用jQuery，需要使用纯JavaScript。

var options = {
        chart: {
            renderTo : 'container',
            type: 'column'
        },
        title: {
            text: 'Topic & Subtopic Mastery'
        },
        subtitle: {
            text: 'Average Level-Stream Mastery vs Average Class Mastery'
        },
        xAxis: {
            categories: topics
        },
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: 'Mastery'
            }
        },
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            align: 'left',
            verticalAlign: 'top',
            x: 100,
            y: 70,
            floating: true,
            shadow: true
        },
        tooltip: {
            shared: true,
            valueSuffix: ' %'
        },
        plotOptions: {
            column: {
                grouping: false,
                shadow: false
            }
        },
        series: resultsData
    };

http://jsfiddle.net/kscwx139/2/

Answer 1

我想出一种解决方案，您需要为水平指定x和y轴数据并为该点指定适当的宽度。

$(function() {
    var chart;
    $(document).ready(function() {
        var i = 0;
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
            if (i == 0) {
                i++;
                return Highcharts.Color(color)
                    .setOpacity(1)
                    .get('rgba');
            } else {
                i++;
                return Highcharts.Color(color)
                    .setOpacity(0.5)
                    .get('rgba');
            }
        });
        var colors = Highcharts.getOptions().colors;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                borderColor: null
            },
            title: {
                text: 'Mailboxes over Quota'
            },
            subtitle: {
                text: 'Mailbox Size in MB'
            },
            exporting: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            xAxis: {
                categories: ["Overall Topic", "Topic 1", "Topic 2"],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total',
                    align: 'high'
                },
                allowDecimals: false,

            },
            tooltip: {
                formatter: function() {
                    return '' +
                        this.series.name + ': ' + Highcharts.numberFormat(this.y, 0, '.', ',');
                }
            },
            legend: {
                enabled: true
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Level',
                color: colors[0],
                data: [{
                    y: 86,
                    x: 0.25
                }, {
                    y: 80,
                    x: 1.25
                }, {
                    y: 95,
                    x: 2.25
                }],
                pointWidth: 80
            }, {
                name: '4A',
                data: [90, 88, 97]
            }, {
                name: '4B',
                data: [95, 78, 92]
            }, {
                name: '4C',
                data: [80, 69, 84]
            }]
        });
    });

});

要显示在列内的标签中，可以使用以下代码。

plotOptions: {
    column: {
        dataLabels: {
            enabled: true,
            formatter: function() {
                return this.series.name;
            },
            y: 25,
        }
    }
}

您可以在此JSFIddle上看到它的运行情况>