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/

中的代码

Answer 1

这是一个很好的示例，说明如何向数据集添加日期 Highcharts Demo

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

Answer 2

您非常接近解决方案，但是，（基于jsfiddle示例）您犯了一个简单的错误。

function updatedata() {
  wilayah.series[0].setData([5, 5, 5]);
  wilayah.update();
}

这里有wilayah变量，它不是图表参考。解决方案是使该引用像这样：

var wilayah = Highcharts.chart('wilayah', {
  chart: {
    type: 'column'
  },
  title: {
    text: kode_bantuan_wil
  },
  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: []

  }]
});

演示：
https://jsfiddle.net/8sxm2p9r/

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

2 个答案: