Highcharts圖顯示了265系列，沒有數據更新到類別和系列

Question

我繼承了一個小型項目，它工作笨重，實際上實際上很不對勁，它幾乎讓我te目結舌。

http://stockfractions.com/doittest.php?TimeType=2&StartTimeFrameID=10&EndTimeFrameID=20&CompanyID=91,89&MetricID=2,3

我所試圖做的是控制什麼是顯示在圖表上，這樣我可以導出最終的圖形和數據集。該腳本基本上在MySQL中執行數據透視查詢，然後在生成的頁面上通過時間幀增量分割數據。單擊各個複選框會更改是否超過時間範圍的一部分。但是，每次我更改圖表內容時，它都會在底部顯示一系列從1到265的數字，並且沒有數據。我有代碼吐出兩個類別的x軸和系列數據傳遞，以確保我沒有失去我的想法。

function setDynamicChart(chartCategories, chartData){ 
alert(chartCategories + '\n' + chartData); 
$('#container123').highcharts({ 
    chart: { 
     type: 'line' 
    }, 
    title: { 
     text: 'Fundamental Company Analysis' 
    }, 
    plotOptions: { 
     line: { 
      dataLabels: { 
       enabled: false 
      }, 
      enableMouseTracking: true 
     } 
    }, 
    xAxis: { 
     categories: chartCategories 
    }, 
    series: chartData 
}); 

}

是改變graphdata

function regen(){ 
var datacount = parseInt(document.f1.datacount.value); 
var linecount = parseInt(document.f1.linecount.value); 
var xnames = []; 
mst = document.getElementById('metrics').value; 
var metricnames = mst.split(","); 
var sseries = ""; 

//rebuild 
cats = ""; 
for(a = 1; a <= linecount; a++){ 
    xnames[a] = document.getElementById('name_'+a).value; 
    for(b = 1; b <= metricnames.length; b++){ 
     temp = "" 
     for(z = 1; z <= datacount; z++){ 
      if(document.getElementById('set_'+z).checked){//deals with datacount 
       if(a==1 && b==1) 
        cats = cats + "'" + document.getElementById('TimeFrame'+z).value + "',"; 
       temp = temp + document.getElementById('data_' + a + '_' + z + '_' + b).value + ","; 
      } 
     } 
     sseries = sseries + "{ name: '" + xnames[a] + "-" + metricnames[b-1] + "', data: [" + removeLastComma(temp) + "]}, " 
    } 
} 

cats = '[' + removeLastComma(cats) + ']'; 
sseries = '[' + removeLastComma(sseries) + ']'; 

//setDynamicChart(eval("cats"),eval("sseries")); 
setDynamicChart(cats,sseries); 

}

是重新生成曲線圖中的代碼的功能。

下面是代碼示例產生

<form name='f1' id='f1'> 
<div id='mytablee_data'> 

<input id='set_1' type='checkbox' value='1' onclick='regen();' checked='checked' style='top:-2px;position:relative;vertical-align: middle;margin-right: 9px'/> 
<input type='hidden' value='2005FY' id='TimeFrame1'> 
2005FY Data 
<table id='mytablee_1' class='tablesorter' border='1'> 
<thead><tr><th align='center'>Company</th><th align='center'>Accounts Payable</th><th align='center'>Accounts Receivable</th></tr> 
</thead> 
<tbody> 
<tr align='right'><td style='width:auto' align='left'>Advanced Micro Devices</td><td style='width:auto'>856</td><td style='width:auto'>0</td></tr> 
<tr align='right'><td style='width:auto' align='left'>Amazon</td><td style='width:auto'>1366</td><td style='width:auto'>0</td></tr></tbody></table><p></p> 
<input id='set_2' type='checkbox' value='2' onclick='regen();' checked='checked' style='top:-2px;position:relative;vertical-align: middle;margin-right: 9px'/> 
<input type='hidden' value='2006FY' id='TimeFrame2'> 
2006FY Data 
<table id='mytablee_2' class='tablesorter' border='1'> 
<thead><tr><th align='center'>Company</th><th align='center'>Accounts Payable</th><th align='center'>Accounts Receivable</th></tr> 
</thead> 
<tbody> 
<tr align='right'><td style='width:auto' align='left'>Advanced Micro Devices</td><td style='width:auto'>1338</td><td style='width:auto'>0</td></tr> 
<tr align='right'><td style='width:auto' align='left'>Amazon</td><td style='width:auto'>1816</td><td style='width:auto'>-103</td></tr></tbody></table><p></p> 
<input id='set_3' type='checkbox' value='3' onclick='regen();' checked='checked' style='top:-2px;position:relative;vertical-align: middle;margin-right: 9px'/> 
<input type='hidden' value='2007FY' id='TimeFrame3'> 
2007FY Data 
<table id='mytablee_3' class='tablesorter' border='1'> 
<thead><tr><th align='center'>Company</th><th align='center'>Accounts Payable</th><th align='center'>Accounts Receivable</th></tr> 
</thead> 
<tbody> 
<tr align='right'><td style='width:auto' align='left'>Advanced Micro Devices</td><td style='width:auto'>1009</td><td style='width:auto'>0</td></tr> 
<tr align='right'><td style='width:auto' align='left'>Amazon</td><td style='width:auto'>2795</td><td style='width:auto'>-255</td></tr></tbody></table><p></p> 
<input type='hidden' name='linecount' value='2'> 
<input type='hidden' name='datacount' value='3'> 
<input type='hidden' id='metrics' value="Accounts Payable,Accounts Receivable"> 
<input type='hidden' value='Advanced Micro Devices' id='name_1'> 
<input type='hidden' value='856' id='data_1_1_1'> 
<input type='hidden' value='1338' id='data_1_2_1'> 
<input type='hidden' value='1009' id='data_1_3_1'> 
<input type='hidden' value='0' id='data_1_1_2'> 
<input type='hidden' value='0' id='data_1_2_2'> 
<input type='hidden' value='0' id='data_1_3_2'> 
<input type='hidden' value='Amazon' id='name_2'> 
<input type='hidden' value='1366' id='data_2_1_1'> 
<input type='hidden' value='1816' id='data_2_2_1'> 
<input type='hidden' value='2795' id='data_2_3_1'> 
<input type='hidden' value='0' id='data_2_1_2'> 
<input type='hidden' value='-103' id='data_2_2_2'> 
<input type='hidden' value='-255' id='data_2_3_2'></div> 
</form> 

的數據元素由公司，時間表，指標去，以便輕鬆地分析了選擇改變

Answer 1

嗯..首先我會建議你閱讀一些關於JS的教程。否則，你會失去所有的頭髮。主要問題是regen()函數。簡而言之，您是手動生成JSON字符串，原因不明（太多的PHP？）。

我會升級方法：

function regen(){ 
    var datacount = parseInt(document.f1.datacount.value); 
    var linecount = parseInt(document.f1.linecount.value); 
    var xnames = []; 
    mst = document.getElementById('metrics').value; 
    var metricnames = mst.split(","); 

    // series and categories in Highcharts should be arrays 
    var sseries = [], 
     cats = []; 

    for(a = 1; a <= linecount; a++){ 
    xnames[a] = document.getElementById('name_'+a).value; 
    for(b = 1; b <= metricnames.length; b++){ 
     // data in series should be an array too 
     temp = []; 
     for(z = 1; z <= datacount; z++){ 
      if(document.getElementById('set_'+z).checked){//deals with datacount 
       if(a==1 && b==1) { 
        //push categories to the array 
        cats.push(document.getElementById('TimeFrame'+z).value); 
       } 
       // Highcharts requires values to be number, not a string -> parse that string to the value 
       temp.push(parseFloat(document.getElementById('data_' + a + '_' + z + '_' + b).value)); 
      } 
     } 
     // generate series objects 
     sseries.push({ name: xnames[a] + "-" + metricnames[b-1], data: temp}); 
    } 
    } 
    setDynamicChart(cats,sseries); 
} 

額外建議：要調試JS，不要使用alert()，而是console.log() - 這是容易對付的開發工具，比警戒一些字符串彈出。

Answer 2

非常感謝。我在網上看到了其他的東西，並拿出了數據的括號。這裏是代碼，以防其他人遭受同樣的困擾，並感謝Pawel指引我朝着正確的方向前進。

function regen(){ 
var datacount = parseInt(document.f1.datacount.value); 
var linecount = parseInt(document.f1.linecount.value); 
var xnames = []; 
mst = document.getElementById('metrics').value; 
var metricnames = mst.split(","); 
var sseries = [], cats = []; 

for(a = 1; a <= linecount; a++){ 
    xnames[a] = document.getElementById('name_'+a).value; 
    for(b = 1; b <= metricnames.length; b++){ 
     temp = []; 
     for(z = 1; z <= datacount; z++){ 
      if(document.getElementById('set_'+z).checked){//deals with datacount 
       if(a==1 && b==1) 
        cats.push(document.getElementById('TimeFrame'+z).value); 
       temp.push(parseFloat(document.getElementById('data_' + a + '_' + z + '_' + b).value)); 
      } 
     } 
     var itemx = { 
      name: "'" + xnames[a] + "-" + metricnames[b-1] + "'", 
      data: temp 
     }; 

     sseries.push(itemx); 
    } 
} 
setDynamicChart(cats,sseries); 

}