Highcharts图表显示265系列，并且在更新到类别和系列后没有数据

时间：2015-02-08 20:44:02

标签： highcharts

我继承了一个工作笨重的小项目，实际上它的实现非常错误，它几乎让我撕裂了。

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>

数据元素按公司，时间范围，指标排列，以便轻松解析选择更改

2 个答案:

答案 0 :(得分：0)

嗯..首先，我建议你阅读一些关于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() - 处理开发人员工具比处理弹出窗口中的某些字符串更容易

答案 1 :(得分：0)

非常感谢。我在网上看到了别的东西，拿出了数据的括号。这是代码，以防其他任何人以同样的方式受苦，并感谢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);

}

相关问题
最新问题