Question

$(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

Answer 1

这是您为第二张图表添加数据的方式：

        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]
        }]

不能在HighChart中为不同的Bar项目单击提供不同的值

1 个答案: