不能给高图中单击的不同条形图项提供不同的值

Cannot give different values to diffrent Bar item click in HighChart

本文关键字：条形图高图中不能单击更新时间：2023-09-26

$(function () {
    var data = {
        animal: [2, 3, 1, 6],
        vehicle: [03, 15, 14],
        fruits: [20, 50, 100]
    };
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        plotOptions: {
            bar: {
                point: {
                    events: {
                        click: secondChart
                    }
                }
            }
        },
        series: [{
            data: [{
                y: 100,
                name: 'animal'
            }, {
                y: 34,
                name: 'vehicle'
            }, {
                y: 67,
                name: 'fruits'
            }]
        }]
    });
    function secondChart(e) {
        var point = this;
        $("#detail").highcharts({
            chart: {
                type: 'column'
            },
            plotOptions: {
                series: {
                    point: {
                        events: {
                            click: thirdChart
                        }
                    }
                }
            },
            title: {
                text: point.name + ':' + point.y
            },
            series: [{
                name: 'Chart 2',
                data: data[point.name]
            }]
        });
    }
    function thirdChart(e) {
        var data = {
            animal: [1, 6, 3, 5],
            vehicle: [01, 19, 24],
            fruits: [30, 80, 100],
            birds: [20, 40, 80]
        };
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'sub_detail',
                type: 'column'
            },
            plotOptions: {
                bar: {
                    point: {
                        events: {
                            click: function () {
                                alert('Category: ');
                            }
                        }
                    }
                }
            },
            series: [{
                data: [{
                    y: 100,
                    name: 'animal'
                }, {
                    y: 50,
                    name: 'vehicle'
                }, {
                    y: 167,
                    name: 'fruits'
                }, {
                    y: 128,
                    name: 'birds'
                }]
            }]
        });
    }
});

当我单击第二个条时，我希望不同的图形值填充第三个图形。我解不出这个问题。在点击第二个图表，我得到相同的值在第三个图表。我有三个div:

div id container
div id detail
div id sub_detail

下面是为第二个图表添加数据的方法:

        series: [{
            name: 'Chart 2',
            data: data[point.name]
        }]

这是第三个图表的代码:

        series: [{
            data: [{
                y: 100,
                name: 'animal'
            }, {
                y: 50,
                name: 'vehicle'
            }, {
                y: 167,
                name: 'fruits'
            }, {
                y: 128,
                name: 'birds'
            }]
        }]

我希望你能看出其中的区别。

应:

        series: [{
            name: 'Chart 3',
            data: data[this.name]
        }]