使用Handlebars刷新Highcharts和来自AJAX的数据

我有一个Highchart图，它以Handlebars表达式的形式从后端接收数据。像这样的东西。使用Handlebars刷新Highcharts和来自AJAX的数据

$('#container').highcharts({ 
    xAxis: { 
     categories: [{{{histKeys}}}] 
    }, 
    yAxis: { 
     title: { 
      text: 'Failure Percentage', 
      style: { 
       color: '#cc0000' 
      } 
     }, 
     labels: { 
      format: '{value}%', 
      style: { 
       color: '#cc0000' 
      } 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
    }, 
    credits: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
      cursor: 'pointer', 
      point: { 
       events: { 
        click: function() { 
         var index = this.series.name; 
         var tfs = epochKeys[Math.ceil(this.x)]; 
         window.location.href = url; 
         return false; 
         } 
        } 
       } 
      } 

    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 
     borderWidth: 0 
    }, 
    series: [ 
    {{#each histData as |index|}} 
    { 
     name: '{{@key}}', 
     type: 'spline', 
     allowPointSelect: true, 
     {{#each index as |status|}} 
     {{#if_eq @key "histSuccess"}} 
     {{/if_eq}} 
     {{#if_eq @key "histFailure"}} 
     data: [{{this}}], 
     {{/if_eq}} 
     {{/each}} 
    }, 
    {{/each}} 
    ] 
});

现在我做一个AJAX调用来获取数据刷新图。我如何将Handlebars表达式的新值传递给Highcharts代码中使用的变量。因此，我在AJAX调用中接收到的数据包含Highcharts函数中使用的所有这些表达式的值。

由于代码是动态的，因此我无法手动更新系列值，因为图形上的行数取决于来自后端的数据。

感谢您的任何意见。

来源

2016-09-20 Nikhil Tikoo

就可以得到（现有）highcharts对象在Ajax回调是这样的：

$('#container').highcharts()

其实有一个相当不错的API与此对象进行交互，这里记载：http://api.highcharts.com/highcharts

对于首先，您可以通过再次调用addSeries（）来替换现有的图表。对于工作，你的系列必须有一个ID，并再次添加了一系列具有相同ID：

$('#container').highcharts().addSeries({ id: 'myid', data: .... });

以同样的方式，你也可以删除现有系列：

$('#container').highcharts().removeSeries('myid');

这是也只可能取代一系列的数据，沿此线的东西：

$('#container').highcharts().getSeries('myid').setData(...);

我希望对你有点帮助。

来源

2016-09-20 12:16:56

非常感谢您的意见。这真的很有帮助。但是xAxis类别呢？我怎样才能取代？任何方式来访问它？ –

通常，几乎所有的东西都可以通过API访问。请访问http://api.highcharts.com/highcharts/Axis以访问和操作轴。 –

使用Handlebars刷新Highcharts和来自AJAX的数据

回答

相关问题