如何在没有按钮的 Highcharts 中动态添加系列？（角度 JS）答案

【问题标题】：How add series dynamically in Highcharts without button? (ANGULAR JS)如何在没有按钮的 Highcharts 中动态添加系列？（角度 JS）
【发布时间】：2016-06-09 21:27:15
【问题描述】：

我的问题非常具体。如何通过Angular JS在highcharts中动态添加系列，没有按钮，否则，没有功能点击。

这是我的控制器：

  var deserialize = angular.fromJson(data.dataContent); //Específico para el dataContent

    for(var i =0; i < deserialize.length; i++){

      var url = deserialize[i];

      $http.get(url).success(function(data){

        var n_scope = [];//NOMBRES PARA LA SERIE
        var e_scope = []; //EMPLEADOS

        for (var i = 0; i < data.length; i++) {

          var nombre_scope = n_scope.push(data[i].nombre);
          var empleados_scope = e_scope.push(parseInt(data[i].empleados));

        }

        var chart = {};

        chart.addSeries({
          name: n_scope[i],
          data: e_scope[i]
        });

图表如下：

  $scope.renderChart = {
              chart: {
                  type: typeArray[2]
              },
              title: {
                   text: titleArray[2]
                   },
              xAxis:{
                categories: yAxisTiArray[2],
                title: {
                  enabled: false
                },
                labels: {
                  enabled: false
                }
              },
              yAxis:{
                title: {
                  text: yAxisTiArray[2]
                }
              },
              series: chart,
              legend: {
                  enabled: true
              },
              credits: {
                enabled: false
             },
             lang: {
               printChart: 'Imprimir gráfico',
               downloadPNG: 'Descargar en PNG',
               downloadJPEG: 'Descargar en JPG',
               downloadPDF: 'Descargar en PDF',
               downloadSVG: 'Descargar en SVG',
               contextButtonTitle: 'EXPORTAR'
             }
           };

我以这个小提琴为例：http://jsfiddle.net/engemasa/WEm4F/，但我不想要按钮点击功能，我希望该系列将其动态添加到图表中

【问题讨论】：

您希望数据何时发生变化？基于时间？
我的数据是从 JSON 文件加载的。每个键“nombre”（西班牙语中的名称）是系列名称，每个键“empleados”（西班牙语中的员工）都是系列数据。
当我在另一个窗口更新数据时，应该在重新加载时更新图表。

标签： javascript jquery angularjs highcharts

【解决方案1】：

您快到了，只需将您的代码放在 API 的成功块中（angularjs api call ）。这是一个例子（我过去是如何绘制数据变化系列的）

var metricData = $http.get(url);
metricData.success(function(value) {
var data = value.responseData;

var graph = [];
    angular.forEach(data.datatimeseries, function(metric) {
    graph.push([ metric.timestamp, metric.value ]);
// Assuming that datatimeseries is the timeseiries

});



var chartX = $('#yourDivId').highcharts();
chartX.addSeries({
    id : graph_id, // some id 
    data : graph 
});
setYaxisExtremes(chartX); // must use it to reflect added series
});

【讨论】：

【解决方案2】：

**已解决**

虽然有按钮，但我可以解决这个问题。

我创建了一个将 Angular.js、PHP 和 Highcharts 与 Materialize.css 集成的存储库，从外部 JSON 动态添加系列。

链接：https://github.com/Nullises/DynamicSeriesHighchartsAngular

【讨论】：