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

}