динамическая серия старших графиков на основе клика

Question

Можно ли сделать так, чтобы на старшем графике отображалась кнопка динамической базы данных?

У меня есть массив активов

var assets = [{
    name: "food",
    type: [{
        name: "a",
        y: 129.2
    }, {
        name: "b",
        y: 132
    }]
}, {
    name: "drink",
    type: [{
        name: "drink1",
        y: 512,
    }, {
        name: "drink2",
        y: 412,
    }]
}];

И я установил пустой массив для старших диаграмм, которые будут использоваться как серии

var data =[];

Затем я устанавливаю кнопку с названием, как название каждой категории

<button title="food">show food</button>
<button title="drink">show drink</button>

codepen

Это первый раз, когда я пытаюсьчтобы показать динамические данные, так что спасибо.

Answer 1

возможно ли сделать так, чтобы на старшей диаграмме отображалась кнопка динамической базы данных?

Да, вы можете сделать, прежде чем устанавливать фактические данные, вам нужно установить первые пустые данные в серии, а затем установитьфактические данные.

DEMO

var assets = [{
        name: "food",
        type: [{
            name: "a",
            y: 129.2
        }, {
            name: "b",
            y: 132
        }]
    }, {
        name: "drink",
        type: [{
            name: "drink1",
            y: 512,
        }, {
            name: "drink2",
            y: 412,
        }]
    }],
    colors = ['#76daff', '#b9f', '#99ffa6', '#ffc312'];


$('button').on('click', function() {
    var attr = $(this).attr('title'),
        obj = assets.find(({name}) => name === attr);
        
    chart.series[0].setData([], true);
    chart.series[0].setData(obj.type || [], true);
});

var chart = Highcharts.chart('highchart', {
    chart: {
        type: 'bar',
        backgroundColor: null,
        height: 270,
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'category',
        labels: {
            useHTML: true,
            formatter: function() {
                return '<div class="myToolTip" style="color:' + colors[this.pos % colors.length] + '">' + this.value + '</div>';
            }
        }
    },
    colors: colors,
    yAxis: {
        min: 0,
        gridLineWidth: 0,
        title: {
            text: ''
        },
        gridLineWidth: 0,
        labels: {
            enabled: false
        }
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none',
                format: '<span style="color:{point.color}">{y}</span>'
            },
            colorByPoint: true
        }
    },
    tooltip: {},
    series: [{}]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="highchart"></div>

<button title="food">show food</button>
<button title="drink">show drink</button>