動態加載系列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

回答

相關問題