Javascript + Highcharts：將series.data替換爲我自己的

我一直在做一個志願者大學現場工作的腳本。Javascript + Highcharts：將series.data替換爲我自己的

請忽略所有參數，除了瓦數和學校。這些是已使用json_encode（）轉換爲數組的SQL結果集。結果集有字符串作爲值，我相信，所以wattages和schools應該是字符串數組。

我想要做的是餅圖輸入自己data，在這種情況下mySeries，我建/在開始填起來，把爲data後來。

function createPieChartGradient(data,title,xlabel,ylabel,type,step,div_id,wattages,schools){ 

    var float_watt = new Array(); 
    for(var index = 0; index < wattages.length; index++) 
    { 
     float_watt[index] = parseFloat(wattages[index]).toFixed(2); 
    } 

    var mySeries = []; //Hopefully this creates a [String, number] array that can be used as Data. 
    for (var i = 0; i < float_watt.length; i++) { 
     mySeries.push([schools[i], float_watt[i]]); 
    } 

    var options = { 
     chart: { 
      renderTo: 'graph', 
      zoomType: 'x', 
      defaultSeriesType: type 
     }, 
     title: { 
       text: 'Consumption Percentage of IHU Schools, Last 7 days' 
      }, 
     tooltip: { 
      //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     xAxis: { 
      categories: [], 
      tickPixelInterval: 150, 
      // maxZoom: 20 * 1000, 
      title: { 
      style: { 
       fontSize: '14px' 
      }, 
       text: xlabel 
      }, 
      labels: { 
       rotation: -45, 
       step: step, 
       align: 'right'//, 
      // step: temp 
      } 
     }, 
     yAxis: { 
      title: { 
      style: { 
       fontSize: '14px' 
      }, 
       text: ylabel 
      }, 
      labels: { 
       align: 'right', 
       formatter: function() { 
        return parseFloat(this.value).toFixed(2); 
       } 
      }, 
      min: 0 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'center', 
      floating: true, 
      shadow: true 
      }, 

     series: [{ 
        type: 'pie', 
        name: 'Consumption Percentage', 
        data: mySeries  //Problematic line. 
       }]                      //Faculty with the smallest wattage -> Green. 
    }; //end of var options{}                   //Next: -> Yellow. 
                             //Last -> Red. 
    //Draw the chart. 
    var chart = new Highcharts.Chart(options);               //TODO: Change colours. 
    document.write("FINISHED"); 
}

事情是，以上將無法正常工作。由於我沒有使用環境（使用notepad ++編寫並在我的apache web服務器上測試，通過結果），我已經手動將問題行清除爲data: mySeries。

任何想法爲什麼這是？他們不是同一類型的陣列，[String, number]？

此外，有沒有什麼環境可以幫助我調試javascript程序？我真的以我的智慧結束了這種情況，我非常希望有一個IDE告訴我什麼是錯的，或者至少讓我指向正確的方向。

來源

2014-01-23 Dimitris Sfounis

您是否嘗試過傾銷mySeries的內容以確保您的假設是正確的？例如，console.log（mySeries） – Corey

@Corey我在關鍵點使用了多個'document.write（）'，它們都是重要的，並且它被檢出。 mySeries印刷了3所學校和3瓦，這是這些陣列的大小。 –

調試時使用console.log（）而不是document.write（）。您可以在Chrome Javascript控制檯中看到輸出。另外，可以導航記錄的對象。它會讓你的生活更輕鬆。（雖然確保在發貨之前將它們移除，但只有在調試器打開時，IE纔會公開控制檯對象）。 – 64BitBob

你看到你在哪裏打電話「toFixed」？讓我們運行一個小實驗：

var wattages = [2.0, 3.0]; 

var float_watt = new Array(); 
for(var index = 0; index < wattages.length; index++) 
{ 
    float_watt[index] = parseFloat(wattages[index]).toFixed(2); 
} 

console.log(JSON.stringify(float_watt));

輸出是不是你所期望的：

["2.00", "3.00"]

看看它是如何得到轉換爲字符串？如果你刪除了「toFixed」並讓你的格式化程序完成它的工作，事情就會好起來。

編輯

這裏是你如何解決您的格式化：

plotOptions: { 
     pie: { 
      dataLabels: { 
       formatter: function() { 
        return parseFloat(this.y).toFixed(2); 
       } 
      } 
     } 
    },

的yLabels格式是什麼都不做的餡餅。

來源

2014-01-23 21:58:36 64BitBob

上帝，你是救命恩人。非常感謝。 toFixed（）調用的目的是隻取得兩位小數，因爲瓦數是平均值，因此我傾向於得到非常大的浮點數，例如'522.22222222'。 –

我已經添加了將數字正確格式化爲答案的代碼。它位於配置的頂層，與「xAxis」和「yAxis」相同。希望有所幫助！（不要忘了點擊「回答」按鈕，如果它關閉了。） – 64BitBob

在我測試它之前還有一件事，'console.log（）'輸出它的內容在哪裏？ –

Javascript + Highcharts：將series.data替換爲我自己的

回答

相關問題