Highcharts图表显示265个系列，更新类别和系列后没有数据

我继承了一个工作笨拙的小项目，实际上它的实现是非常错误的，它几乎让我头痛不已

我试图做的是控制图形上显示的内容，以便导出最终的图形和数据集。该脚本基本上在MySQL中执行pivot查询，然后在结果页面上按时间段增量将数据分割。单击各个复选框会更改是否超过时间范围是图形的一部分。但是，每次我更改图表内容时，它只在底部显示一组从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
});

}

是更改图形数据的函数

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>

---

数据元素根据公司、时间框架和度量进行分类，以便轻松解析选择更改。。首先，我建议你阅读一些关于JS的教程。否则你会失去所有的头发。主要问题在于regen函数。简而言之，您正在手动生成JSON字符串，原因不明，PHP？太多了

我将升级您的方法：

功能再生{ var datacount=parseIntdocument.f1.datacount.value； var linecount=parseIntdocument.f1.linecount.value； var xnames=[]； mst=document.getElementById'metrics'。值； var metricnames=mst.split，； //高位图表中的系列和类别应为数组 var sseries=[]， 猫=[]；

---

fora=1；a非常感谢。我在网上看到了其他内容，并取出了括号中的数据。这是代码，以防其他人也遭受同样的痛苦，感谢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);

---

}

非常感谢。我尝试了你的方式，我得到了第一类显示，以及数字2-9在x轴上。我看了控制台日志，得到了Array[2005FY，2007FY]Array[Object，Object，Object，Object]，所以第一个注册正确，但其他的没有。我将检查语法并查看是否需要引号Edit看起来您在将我的代码复制粘贴到页面时遇到了问题。。我在125行中看到了差异，我认为第二组需要传递JSON格式。我做了一些更改，使系列名称正确显示，但没有显示数据。我将代码修改为var itemx={name:'+xnames[a]+-+metricnames[b-1]+'，data:[+temp+]}；sseries.pushitemx；但数据块是关闭的