Question

我想使用Highcharts插件创建一个条形图，其中每个条形图都有背景颜色，并且在加载时它会被填满（有点像加载条）。目前我只能使用堆叠条和计算“填充”系列来完成此操作。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                enabled: false
            },
            labels: {
                enabled: false
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    formatter: function() { 
                        if(this.series.name != 'Filler')
                            return Math.round(this.percentage) + '%';
                        else return "";
                    }
                }
            },
            series: {
                pointWidth: 18,
                stacking: 'percent',
                dataLabels: {
                    enabled: true,
                    inside: true,
                    align: 'right',
                    color: '#fff'
                }
            }
        },
        tooltip: {
            useHTML: true,
            shared: true,
            formatter: function() {
                return '<i>' + this.points[1].x +'</i>: <b>'+ Math.round(this.points[1].percentage) +'%</b>';
            }
        },
        series: [{
            name: 'background filler',
            data: [7, 9, 8, 5, 10]
        }, {
            name: 'actual Value',
            data: [5, 3, 4, 7, 2]
        }]
    });
});

我希望有一个固定的“酒吧背景”，这样它就不会填满负荷。如果可能的话，我不想添加填充系列并通过javascript计算其数据（就像我现在一样）。

我怎样才能完成它？

最好的问候。

Answer 1

如果我正确理解你，你需要一个静态背景，然后你的真实数据栏就可以在它上面制作动画。您可以通过禁用条形图的分组来实现此操作，并且仅为其中一个系列设置动画。

plotOptions: {
    bar: {
        grouping: false
    }
}

这是一个更新的fiddle。

Answer 2

这可能会有所帮助http://api.highcharts.com/highcharts#plotOptions.bar.animation。

下面是固定栏栏的演示 - DEMO

plotOptions: {
                column: {
                    animation: false
                }
            }

Answer 3

我觉得像this这样的东西可能。我做的是首先加载“背景”系列。然后在显示之后，我在chart.events部分添加实际数据系列：

chart: {
    type: 'bar',
    events: {
        load: function () {
            this.addSeries({
                name: 'actual Value',
                data: [5, 3, 4, 7, 2],
                dataLabels: {
                    enabled: true
                }
            });
        }
    }
},

如何在Highcharts条形图中设置全长背景？

3 个答案: