javascript - 使用下拉菜单动态更改条形图

Question

我在我的项目中使用条形图，我想通过数据库中的数据动态更改数据。

所以这是我在 js 中的条形图代码：

Highcharts.chart('wilayah', {
        chart: {
            type: 'column'
        },
        title: {
            text: kode_bantuan
        },
        subtitle: {
            text: 'Barchart by Wilayah'
        },
        xAxis: {
            categories: kanwil,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rupiah? (Rp)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'clean',
            data: cleanwil

        }, {
            name: 'Salcred',
            data: salcredwil

        }, {
            name: 'Penyerapan',
            data: penyerapanwil

        }, {
            name: 'persn',
            data: []

        }]
    });

所以基本上这段代码显示了我的条形图，我将使用下拉菜单动态更改数据来触发它。

所以我在下拉触发时插入了一些代码：

    wilayah.data.datasets.push({
          title: 'testing',
          backgroundColor: '#ff0000',
          data: [1,2,3]
        });
        wilayah.update();

那样做有错吗？这里可能是我在小提琴中的代码https://jsfiddle.net/k6mgqr59/

标签： javascriptphphighchartsbar-chart

Answer 1

这是一个关于如何向数据集添加日期的好例子 Highcharts Demo

            var x = (new Date()).getTime(), // current time
                y = Math.round(Math.random() * 100);
            series.addPoint([x, y], true, true);