Question

使用以下代码使用高级图表创建图表。

function loadGroup() {
    $(function() {
        $('#container').highcharts({
            colors: ['#F32D2B', '#F0F468', '#F58835', '#A5D17A', ],
            chart: {
                type: 'bar',
                options3d: {
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    depth: 50,
                    viewDistance: 25
                },
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                renderTo: 'histogram',

            },
            title: {
                text: 'Country'
            },
            xAxis: {
                categories: ['UK', 'US', 'Brazil', 'Brunei', 'Indonesoa'],
                labels: {
                    useHTML: true,
                    formatter: function() {
                        var name = this.value;
                        var link = '<span  id="' + name + '" >' +
                            name + '</span>'
                        return link;
                    }
                },
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total Values'
                }
            },
            legend: {
                reversed: true
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.percentage:.0f}% ({point.y}out of {point.stackTotal})'
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: 'white',
                        style: {
                            textShadow: false,
                        },
                        format: '{point.y}'
                    },
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) {
                                    loadDrillDownData(drilldown);
                                }
                            }
                        }
                    }
                },
            },
            series: [{
                name: 'Pending',
                data: [{
                    y: 1,
                    drilldown: "Pending Shipment",
                }, {
                    y: 2,
                }, {
                    y: 1,
                }, {
                    y: 1,
                }, {
                    y: 2,
                }, ]
            }, {
                name: 'Completed',
                data: [{
                    y: 8,
                    drilldown: "Completed Shipment",
                }, {
                    y: 4,
                }, {
                    y: 4,
                }, {
                    y: 2,
                }, {
                    y: 5,
                }, ]
            }, {
                name: 'In Progress Shipment',
                data: [{
                    y: 2,
                    drilldown: "In Progress Shipment",
                }, {
                    y: 2,
                }, {
                    y: 3,
                }, {
                    y: 2,
                }, {
                    y: 1,
                }, ]
            }, {
                name: 'Delayed Shipment',
                data: [{
                    y: 5,
                    drilldown: "Delayed",
                }, {
                    y: 3,
                }, {
                    y: 4,
                }, {
                    y: 7,
                }, {
                    y: 2,
                }, ]
            }, ]
        });
    });
}

我想用动画插入图表link

但是有什么办法可以用相同的动画加载图表吗？即使图表正在加载，我也想要相同的动画。高图表是否可行？我怎么能这样做？

Answer 1

您可以将图表类型更新为行。

chart: {
            type: 'bar',
 }

到行

 chart: {
            type: 'line',
 }

这就是你要找的东西吗？

插值图表数据

1 个答案: