Javascript + Highcharts: Подстановка series.data для моих собственных

Question

Я делаю этот сценарий для работы на добровольной основе на университетском сайте.

Просьба игнорировать все параметры, кроме Мощность и школы. Это SQL-результирующие наборы, которые были преобразованы в массивы с использованием json_encode(). Я думаю, что наборы результатов имеют строки как значения, поэтому оба типа: 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"); 
} 

Дело в том, что вышеуказанное не будет работать. Поскольку я не использую среду (запись в блокноте ++ и тестирование на моем веб-сервере apache, через результаты), я вручную оформил проблему , чтобы быть data: mySeries.

Любая идея, почему это так? Разве они не являются одним и тем же типом массива, [String, number]?

Кроме того, существуют ли какие-либо среды, которые помогут мне отлаживать javascript-программы? Я действительно нахожусь на грани этой ситуации, и я бы очень хотел, чтобы IDE рассказывала мне, что не так, или, по крайней мере, указывать мне в правильном направлении.

Answer 1

Вы видите, где вы называете "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» и пусть ваш форматировщик выполнит свою работу, все будет хорошо.

EDIT

Вот как исправить форматировщик:

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

yLabels форматировщик не делает ничего для пирога.