Question

我正在尝试使用django创建一个网站，以显示针对不同数据范围的highstock（图表）图表。我是高级python用户，尽管是使用javascript的初学者。

我希望用于数据范围（1d，1w，1m等）的按钮在单击时分别调用不同的URL。我将代码以及rangeSelector按钮的文档放在下面。在示例代码中，我尝试了几种在网上找到的东西的变体，尽管没有用。任何帮助深表感谢！

rangeSelector: {
        allButtonsEnabled: true,
        buttons: [{
        type: 'day',
                count: 1,
                text: 'Day',
                events: {
                click: function () {
                return "https://0.0.0.0/daydata";
                }
                },
                dataGrouping: {
                forced: true,
                        units: [['day', [1]]]
                }
        }, {
        type: 'week',
                count: 1,
                text: 'Week',
                events: {
                click: function () {
                return "https://0.0.0.0/weekdata";
                }
                },
        },
        {
        type: 'month',
                count: 1,
                text: 'Month',
                click: function () {
                return "https://0.0.0.0/monthdata";
                },
                dataGrouping: {
                forced: true,
                        units: [['month', [1]]]
                }
        }, {
        type: 'all',
                text: 'All',
                events: {
                click: function (event) {
                return "https://0.0.0.0/alldata";
                }
                },
                dataGrouping: {
                forced: true,
                        units: [['month', [24]]]
                }
        }],
},

https://api.highcharts.com/highstock/rangeSelector.buttons https://api.highcharts.com/highstock/rangeSelector.buttons.events.click

谢谢！

Answer 1

您可以在events.click中使用 jQuery 从外部API获取数据。然后使用新的数据和数据分组选项更新图表。

  events: {
    click: function() {

      $.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/new-intraday.json',
        function(data) {
          chart.series[0].update({
            data,
            dataGrouping: {
              forced: true,
              units: [
                ['week', [1]]
              ]
            }
          });
        });

      return false; // prevent further actions
    }
  }

实时演示： http://jsfiddle.net/BlackLabel/2mb4fypn/

如何使Highstock范围选择器按钮加载新数据？

1 个答案: