Динамическое изменение диаграммы с помощью выпадающего списка

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

Вы были очень близки к решению, однако (основываясь на вашем примере с 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/

Answer 2

Вот хороший пример того, как добавить дату в наборы данных Highcharts Demo

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