在highcharts檢索JSON數據

Question

我一直在試圖定義一個極好的jsfiddle，我很幸運，在前面的問題在這裏被定向到：Switching between many Highcharts using buttons or link text

我非常新的JavaScript編程（和highcharts也）和我在從數據庫中檢索自己的數據時遇到了一些困難。目前，我已經建立了我的圖表如下所示：

$('chart1').ready(function() { 
     var options = { 
      chart: { 
       renderTo: 'chart1', 
       type: 'column', 
       marginTop: 40, 
       marginBottom: 75 
      }, 
      legend: { 
       enabled: false 
      }, 
      title: { 
       text: 'Revenues', 
       x: 25 //center 
      }, 

      xAxis: { 
       title: { 
        text: '' 
       }, 
       categories: [] 
      }, 
      yAxis: { 
       showInLegend: false, 
       tickAmount: 11, 
       endOnTick: false, 
       startOnTick: true, 
       labels: { 
        formatter: function() { 
        return Highcharts.numberFormat(this.value, 0, '.', ','); 
           } 
       }, 
       title: { 
        text: '<?php echo $unitCurr; ?>' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b><br/>'+ 
         this.x +': '+ Highcharts.numberFormat(this.y, 0,'.',','); 
       } 
      }, 
      series: [] 
     } 
     var tableName = '<?php echo $tableName; ?>' 
     $.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) { 
      options.xAxis.categories = json[0]['data']; 
      options.series[0] = json[1]; 
      chart = new Highcharts.Chart(options); 
     }); 
    }); 

在你會發現，我使用JSON來從我的數據庫中的信息，一切工作就好了底部。在我之前的問題中，我問的是如何使用按鈕切換圖表，並將其引導至以下jsfiddle：http://jsfiddle.net/jlbriggs/7ntyzo6u/

此示例包含3個圖表，但我一直試圖操縱第一個圖表以查明如果我能把我自己的數據顯示，而不是正在生成的隨機數據：

var chart, 
    chartOptions = {}, 
    chartData = {}; 

chartData.chart1 = randomData(25); 
chartData.chart2 = randomData(10, true); 
chartData.chart3 = randomData(65, true, 300); 

chartOptions.chart1 = { 
    chart: { 
    type: 'column' 
    }, 
    title: { 
    text: 'Chart 1 Title' 
    }, 
    yAxis: { 
    title: { 
     text: 'Chart 1<br/>Y Axis' 
    } 
    }, 
    series: [{ 
    name: 'Chart 1 Series', 
    data: chartData.chart1 
    }] 
}; 

但不管我多麼盡力了，我似乎無法改變「數據：chartData.chart1」在這樣它就可以檢索我從$ .getJSON函數中獲得的數組。你們能幫助我解釋爲什麼，例如，下面的代碼不起作用嗎？在這裏，我嘗試爲我的數據庫數據交換ChartData.chart1數組。我沒有足夠的經驗來判斷它的整個隨機數生成部分是否妨礙了它的工作，或者我的理解是否嚴重缺乏。 （我確信data.php中的數據確實可用，因爲我可以在正常的數組中顯示它）。

var chart, 
    chartOptions = {}, 
    chartData = {}; 

chartData.chart2 = randomData(10, true); 
chartData.chart3 = randomData(65, true, 300); 

$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) { 
    chartData.chart1 = json[6]['data']; 
}); 

    chartOptions.chart1 = { 
     chart: { 
     type: 'column' 
     }, 
     title: { 
     text: 'Chart 1 Title' 
     }, 
     yAxis: { 
     title: { 
      text: 'Chart 1<br/>Y Axis' 
     } 
     }, 
     series: [{ 
     name: 'Chart 1 Series', 
     data: chartData.chart1 
     }] 
    }; 

任何幫助，您可以提供將不勝感激！

Answer 1

你實際上非常接近可以工作的東西。您的問題與異步調用相對於內聯代碼的時間有關，也與JavaScript中的分配方式有關。

作爲一個簡單的例子，這裏的一些代碼：

x = {foo:5}; 
y = x.foo; 
x.foo = 9; 

在本月底，x.foo是9，但y仍然是5

你的代碼行

chartData.chart1 = json[6]['data']; 

直到對服務器的調用完成後纔會執行

;它包含在回調函數中。但是，這部分代碼

chartOptions.chart1 = { 
    chart: { 
    type: 'column' 
    }, 
    title: { 
    text: 'Chart 1 Title' 
    }, 
    yAxis: { 
    title: { 
     text: 'Chart 1<br/>Y Axis' 
    } 
    }, 
    series: [{ 
    name: 'Chart 1 Series', 
    data: chartData.chart1 
    }] 
}; 

立即執行。看到問題了嗎？在服務器調用完成之前，您已將chartData.chart的當前值編入chartOptions.chart1。這就是爲什麼你沒有看到你的數據。

相反，嘗試這樣的事：

chartOptions.chart1 = { 
    chart: { 
    type: 'column' 
    }, 
    title: { 
    text: 'Chart 1 Title' 
    }, 
    yAxis: { 
    title: { 
     text: 'Chart 1<br/>Y Axis' 
    } 
    }, 
    series: [{ 
    name: 'Chart 1 Series', 
    data: [] 
    }] 
}; 

$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) { 
    chartOptions.chart1.series[0].data = json[6]['data']; 
}); 

現在，當你的數據回來，你把它變成實際上是被用來渲染圖（一旦你點擊右邊按鈕對象）。請記住，在服務器調用完成之前它將是空的。