動的に直列にロードするHighCharts

Question

ユーザが選択したプロジェクトに応じて、いくつかのシリーズで動的にロードしようとしています。私はLaravel 5.2、PHP 5.6、HighChartsを使用しています。 私は、ユーザーがプロジェクトを選択したときに生成される1つのJSONファイルを読み込むことができました。しかし、JavaScriptがJSONファイルと異なるシリーズを解析し、これをシリーズに動的に読み込むことができれば幸いです。

$(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で解析することが一つのファイルに、 これは私が使用していたコードですシリーズに取り込まれます。

ありがとうございました！

EDIT ご返信ありがとうございます。私は私のコード編集した：

$(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(); 

}); 

をしかし、何ももはや表示されず、次のエラーが、私も

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

を試してみました

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

を与えている。しかし、これは与える：

TypeError: Cannot set property 'setData' of undefined 

Answer 1

のようなオブジェクトでも負荷データとメソッドを定義することができますハイチャートをグラフ化し、すべて動的にロードして作業します:)ハイチャートは素晴らしいです。

Answer 2

ハイチャートには新しいシリーズを追加する方法chart.addSeriesがあると思います。現在のシリーズを新しいシリーズに置き換える場合は、chart.series[0].remove()を使用して最初のシリーズを削除してから、chart.addSeriesという新しいシリーズを追加してみてください。私のWebアプリケーションでhttp://api.highcharts.com/highcharts/Chart.addSeries/Chart.addSeries は、私が10〜15の種類を使用し

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

チェック：chart.addSeriesのためのパラメータは例..その後、あなたの
{ name: 'Grades', data: processed_json }