Javascript 使用Highcharts和jquery以及php加载多个变量

大家好，这是我的第一篇帖子，但我是以前解决方案中堆栈溢出的热心用户，如果我能找到答案，我就不会发布它了

我正在使用下面的函数，它使用high charts events->load函数根据需要更新12个数据点，在我的例子中是每分钟更新一次。我只是想知道我在这段代码中做错了什么

graphpage.html：

<script src='scripts/jquery-latest.js'></script>
<script src='scripts/highcharts.js'></script>

<div class="col-sm-12 col-lg-12">
<div class="graph-unit">
  <dtitle>Other Information</dtitle>
  <hr>
  <div class="section-graph">
    <div id="active_power_container"></div>
  </div>
</div>
<script src="scripts/getgraphdata.php"></script>

其他资料

getgraphdata.php：

<?
require_once 'datastuff.php';
header('Content-Type: text/javascript');
?>
var collector_id='<?=$db->currentUser?>';
var meter_id=3;
var samples=60;
var mod=2;
var chart;
    $(document).ready(function() {

    var options = {
            chart: {
                renderTo: 'active_power_container',
                defaultSeriesType: 'line',
            events: {
            load: function() {
                var date,
                series1 = this.series[0],
                series2 = this.series[1],
                series3 = this.series[2],
                series4 = this.series[3],
                series5 = this.series[4],
                series6 = this.series[5],
                series7 = this.series[6],
                series8 = this.series[7],
                series9 = this.series[8],
                series10 = this.series[9],
                series11 = this.series[10],
                series12 = this.series[11],
                $sQry = '/i/data/graph_widget_data.php?collector_id='+collector_id+'&limit=1';
                setInterval(function() {

                    $.get($sQry , null, function(tsv) {
                        tsv = tsv.split(/\n/g);
                        $.each(tsv, function(i, line) {
                            line = line.split(/\t/);
                            var date = line[0];
                            series1.addPoint([date, line[1]], true, true);
                            series2.addPoint([date, line[2]], true, true);
                            series3.addPoint([date, line[3]], true, true);
                            series4.addPoint([date, line[4]], true, true);
                            series5.addPoint([date, line[5]], true, true);
                            series6.addPoint([date, line[6]], true, true);
                            series7.addPoint([date, line[7]], true, true);
                            series8.addPoint([date, line[8]], true, true);
                            series9.addPoint([date, line[9]], true, true);
                            series10.addPoint([date, line[10]], true, true);
                            series11.addPoint([date, line[11]], true, true);
                            series12.addPoint([date, line[12]], true, true);
                        });

                    });




                }, 1000);
            }
        }
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Active Power chart (meter: '+meter_id+')',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    hour: '%I %p',
                    minute: '%I:%M %p'
                }
            },
            yAxis: {
                title: {
                    text: 'Active Power (Watts) '
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [<? $query = $db->DB("SELECT long_description,short_description FROM `desc_tbl` WHERE `id` = '{$db->getdata(3)}'");
    $num_rows = $query->num_rows;
    $i = 1;
    while($row = $query->fetch_assoc()){
        $title = $row['short_description'];
        if($title == ""){ $title = $row['long_description']; }
?>{
    name: '<?=$title?>'
}<? if($i < $num_rows){echo ","; $i++; }  }?>]
        }

        sQry= '/i/data/graph_widget_data.php?collector_id='+collector_id+'&meter_id='+parseInt(meter_id)+'&samples='+parseInt(samples)+'&mod='+parseInt(mod);


        jQuery.get(sQry , null, function(tsv) {
            var lines = [];
            traffic  = [];
            traffic1 = [];
            traffic2 = [];
            traffic3 = [];
            traffic4 = [];
            traffic5 = [];
            traffic6 = [];
            traffic7 = [];
            traffic8 = [];
            traffic9 = [];
            traffic10 = [];
            traffic11 = [];
            try {
                // split the data return into lines and parse them
                tsv = tsv.split(/\n/g);
                jQuery.each(tsv, function(i, line) {
                    line = line.split(/\t/);
                    //date = Date.parse(line[0] +' UTC');
                    date = line[0];
                    traffic.push([
                        parseInt(date),
                        parseFloat(line[1].replace(',', ''))
                    ]);
                    traffic1.push([
                        parseInt(date),
                        parseFloat(line[2].replace(',', ''))
                    ]);
                    traffic2.push([
                        parseInt(date),
                        parseFloat(line[3].replace(',', ''))
                    ]);
                    traffic3.push([
                        parseInt(date),
                        parseFloat(line[4].replace(',', ''))
                    ]);         
                    traffic4.push([
                        parseInt(date),
                        parseFloat(line[5].replace(',', ''))
                    ]); 
                    traffic5.push([
                        parseInt(date),
                        parseFloat(line[6].replace(',', ''))
                    ]);
                    traffic6.push([
                        parseInt(date),
                        parseFloat(line[7].replace(',', ''))
                    ]);
                    traffic7.push([
                        parseInt(date),
                        parseFloat(line[8].replace(',', ''))
                    ]);
                    traffic8.push([
                        parseInt(date),
                        parseFloat(line[9].replace(',', ''))
                    ]);
                    traffic9.push([
                        parseInt(date),
                        parseFloat(line[10].replace(',', ''))
                    ]);
                    traffic10.push([
                        parseInt(date),
                        parseFloat(line[11].replace(',', ''))
                    ]);     
                    traffic11.push([
                        parseInt(date),
                        parseFloat(line[12].replace(',', ''))
                    ]); 
                });
            } catch (e) {  }
            options.series[0].data = traffic;
            options.series[1].data = traffic1;
            options.series[2].data = traffic2;
            options.series[3].data = traffic3;
            options.series[4].data = traffic4;
            options.series[5].data = traffic5;
            options.series[6].data = traffic6;
            options.series[7].data = traffic7;
            options.series[8].data = traffic8;
            options.series[9].data = traffic9;
            options.series[10].data = traffic10;
            options.series[11].data = traffic11;

            chart = new Highcharts.Chart(options);
        });
    });

var收集器_id=“”；
var仪表_id=3；
var样本=60；
var mod=2；
var图；
$（文档）.ready（函数（）{
变量选项={
图表：{
renderTo:“活动的动力容器”，
defaultSeriesType:“行”，
活动：{
加载：函数（）{
var日期，
series1=此.series[0]，
series2=本系列[1]，
series3=本系列[2]，
series4=本系列[3]，
series5=本系列[4]，
series6=本系列[5]，
series7=本系列[6]，
series8=本系列[7]，
series9=本系列[8]，
series10=本系列[9]，
series11=本系列[10]，
series12=本系列[11]，
$sQry='/i/data/graph_widget_data.php？收集器_id='+收集器_id+'&limit=1'；
setInterval（函数（）{
$.get（$sQry，null，函数（tsv）{
tsv=tsv.分割（/\n/g）；
$。每个（tsv，功能（i，线）{
line=line.split（/\t/）；
var日期=第[0]行；
series1.addPoint（[date，line[1]]，true，true）；
series2.addPoint（[date，line[2]]，true，true）；
series3.addPoint（[date，line[3]]，true，true）；
series4.addPoint（[date，line[4]]，true，true）；
series5.addPoint（[date，line[5]]，true，true）；
series6.addPoint（[date，line[6]]，true，true）；
series7.addPoint（[date，line[7]]，true，true）；
series8.addPoint（[date，line[8]]，true，true）；
series9.addPoint（[date，line[9]]，true，true）；
series10.addPoint（[date，line[10]]，true，true）；
series11.addPoint（[date，line[11]]，true，true）；
series12.addPoint（[date，line[12]]，true，true）；
});
});
}, 1000);
}
}
},
学分：{
已启用：false
},
标题：{
文字：“有功功率图（仪表：‘+仪表id+’）”，
x:-20/中心
},
副标题:{
文本：“”，
x:-20
},
xAxis：{
键入：“日期时间”，
日期时间标签格式：{
小时：'%I%p'，
分钟：“%I:%M%p”
}
},
亚克斯：{
标题：{
文字：“有功功率（瓦特）”
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“顶部”，
x:-10，
y:100，
边框宽度：0
},
series:[我建议您使用循环而不是12行，并调用addPoint。其次，在addPoint中，您应该使用单重绘。换句话说，所有series都应该具有

series1.addPoint([date, line[12]], false, true);

但最后

series12.addPoint([date, line[12]], true, true);

然后，您将避免多次重画图表

对于您的数据，问题可能在于您使用的值是字符串，而不是浮点值。请尝试使用类似于：

series1.addPoint([parseFloat(date), parseFloat(line[12])], false, true);

一般来说，在php中，我建议您返回json（json_encode），在javascirpt中使用$.getJSON（），这样您就可以避免任何类型问题。
感谢您的回复，它已经起到了作用：）我还考虑了$.getJSON（），效果非常好：）