动态加载系列HighCharts

我正在尝试动态加载多个系列，具体取决于用户选择的项目。我正在使用Laravel 5.2，PHP 5.6和HighCharts。我已经设法加载一个JSON文件，这是在用户选择项目时生成的。但是，如果JavaScript能够解析JSON文件中的不同系列并将其动态加载到系列中，我会希望它。这是我使用的代码：动态加载系列HighCharts

$(function() { 
    // Set up the chart 
    var processed_json = new Array(); 
    $.getJSON('/uploads/test.json', function(data) { 
     for (i = 0; i < data.length; i++) { 
      processed_json.push([data[i].key, data[i].value]); 
     } 
     var chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'column', 
       options3d: { 
        enabled: true, 
        alpha: 0, 
        beta: 0, 
        depth: 0, 
        viewDistance: 25 
       } 
      }, 
      title: { 
       text: 'Grades' 
      }, 
      subtitle: { 
       text: 'Dataset' 
      }, 
      plotOptions: { 
       column: { 
        depth: 0 
       } 
      }, 
      series: [{ 
       name: 'Grades', 
       data: processed_json 
      }], 

      credits: { 
       enabled: false 
      } 
     }); 

     function showValues() { 
      $('#alpha-value').html(chart.options.chart.options3d.alpha); 
      $('#beta-value').html(chart.options.chart.options3d.beta); 
      $('#depth-value').html(chart.options.chart.options3d.depth); 
     } 

     // Activate the sliders 
     $('#sliders input').on('input change', function() { 
      chart.options.chart.options3d[this.id] = this.value; 
      showValues(); 
      chart.redraw(false); 
     }); 

     showValues(); 
    }); 
    });

我的JSON的格式如下：

[{"key":"Math","value":6},{"key":"Biology","value":"8"},{"key":"English","value":"7"},{"key":"Gym","value":"4"}]

所以我想有更多的JSONs像这样，在一个文件中的Javascript被解析并加载到系列中。

谢谢！

编辑感谢您的回复。我已经编辑我的代码：

$(function() { 

var processed_json = new Array(); 
     var options = {  
       chart: { 
        renderTo: 'container', 
        type: 'column', 
        options3d: { 
         enabled: true, 
         alpha: 0, 
         beta: 0, 
         depth: 0, 
         viewDistance: 25 
        } 
       }, 
       title: { 
        text: 'Grades' 
       }, 
       subtitle: { 
        text: 'Dataset' 
       }, 
       plotOptions: { 
        column: { 
         depth: 0 
        } 
       }, 
       series: [{ 

       }], 

       credits: { 
        enabled: false 
       } 
      }; 

     $.getJSON('/uploads/test.json', function(data) { 
      for (i = 0; i < data.length; i++) { 
       processed_json.push([data[i].key, data[i].value]); 
      } 
     }); 
      options.series[0].remove(); 
      options.series[0].setData = { 
       name: 'Grades', 
       data: processed_json 
      } 


     var chart = new Highcharts.Chart(options); 
     chart.redraw(true); 
     function showValues() { 
      $('#alpha-value').html(chart.options.chart.options3d.alpha); 
      $('#beta-value').html(chart.options.chart.options3d.beta); 
      $('#depth-value').html(chart.options.chart.options3d.depth); 
     } 

     // Activate the sliders 
     $('#sliders input').on('input change', function() { 
      chart.options.chart.options3d[this.id] = this.value; 
      showValues(); 
      chart.redraw(false); 
     }); 

     showValues(); 

});

但就是不再显示任何内容，并给出

TypeError: options.series[0].remove is not a function

我也曾尝试

var chart = new Highcharts.Chart(options); 
      chart.series[0].remove(); 
      chart.series[0].setData = { 
       name: 'Grades', 
       data: processed_json 
      } 
     chart.redraw(true);

以下错误但是这给：

TypeError: Cannot set property 'setData' of undefined

来源

2016-10-14 Anna Jeanine

也许这样做： processed_json.push（{data：[{y：data [i] .value，name：data [i] .key}]}）; 通过在这里找到的文档判断：http://www.highcharts.com/docs/chart-concepts/series – selten98

嗨我试过这个，但没有再显示数据：'（ –

所以你的原始想法有用吗？可以你展示了一个这样的图像吗？然后可能是另一个图像显示你想要的是什么？ – selten98

对象然后，随着负载数据定义方法..例如：

function(chart) { 
    $.each(chart.series, function(i, v){ 
     chart.series[i].remove(true); 
    }); 
    chart.addSeries({your_data}, true); 
}

检查http://api.highcharts.com/highcharts/Chart.addSeries/Chart.addSeries 以我的web应用，我使用10 15类型的图表highchart和所有动态加载和工作正常:) Highcharts真棒。

来源

2016-10-14 12:36:03 Cuchu

正确的链接是http://api.highcharts.com/highcharts /Chart.addSeries – Cuchu

我认为highcharts有一个方法chart.addSeries用于添加一个新的系列。如果要用新系列替换当前系列，则可以尝试使用chart.series[0].remove()首先删除当前系列，然后使用chart.addSeries添加新系列。用于chart.addSeries参数可以像您的
{ name: 'Grades', data: processed_json }

来源

2016-10-14 11:34:39 suguspnk

动态加载系列HighCharts

回答

相关问题