Javascript 是否在一个样条曲线图中显示两个（或多个）？

我是海图方面的新手，基本上是开发和编码方面的。。。现在我花了大约一周的时间来修改我在网络上找到的一些示例，以制作一个标准图表，在一个样条曲线图中显示两个系列的数据

我设法修改了我在网络上找到的样本，使我的图表只适用于一个系列，但一旦我尝试绘制第二个系列，它就不起作用了。。。确切地说，我并不了解它的工作方式。。。我很确定这没那么难，因为我的图表很基本，但我真的不知道怎么做

让我们从我的情况开始

我已经完成了一个名为“data3.php”的文件，它连接到一个mysql数据库，并返回3列数据：日期，然后是2个不同的温度（我想显示）。基本上，data3.php作为 结果似乎正确（您可以在此处检查：） 它以以下格式返回当天每10分钟的所有数据：

2013年10月28日星期一00:00:00 14.0 32.7

以下是生成data3.php finle的代码：

<?php

$con = mysql_connect("localhost","username","password");


if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("database", $con);
$result = mysql_query("SELECT *
FROM pouleto
WHERE (
date( id ) = curdate( )
)
AND extract(
MINUTE FROM `id` )
IN ( 0, 10,20, 30, 40, 50 );");


while($row = mysql_fetch_array($result)) {
$uts=strtotime($row['id']); //convertir a Unix Timestamp
  $date=date("l, F j, Y H:i:s",$uts);
  //  echo $valor3 . "\t" . $row['Temperature sensor 1']. "\n";
echo $date . "\t" . $row['Temperature sensor 1']. "\t" . $row['Temperature sensor 3']. "\n";

}


/*
 while($row = mysql_fetch_array($result)) {
   echo $row['id'] . "\t" . $row['Temperature sensor 1']. "\n";
}
*/
mysql_close($con);

?>

让我们假设这部分工作正常，因为返回的数据是我需要在图表中绘制的数据

我现在有一个名为“index2.php”的文件，用于显示图表（在这里可见：）。我设法修改了我发现的代码，使其能够与“data3.php”一起工作，但我的问题是，它只显示第一个温度，而不显示第二个温度。在其他OWRD中，如何修改index2.php以使其绘制两条线，或者基本上绘制更多的线（我计划绘制多达6种不同的温度）？？？ 以下是我的index2.php代码：

在PHP和MySQL中使用Highcharts

var图； $（文档）.ready（函数（）{ 变量选项={ 图表：{ renderTo:'容器'， defaultSeriesType:“样条线”， marginRight:130， marginBottom:25 },

                },
                tooltip: {
                    formatter: function() {
                      return Highcharts.dateFormat('%H:%M', this.x-(1000*3600)) +' - <b>'+ this.y + ' degres</b>';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'Degres',
                shadow : true,
            tooltip : {
                         valueDecimals : 2}
                }]
            }
            // Load data asynchronously using jQuery. On success, add the data
            // to the options and initiate the chart.
            // This data is obtained by exporting a GA custom report to TSV.
            // http://api.jquery.com/jQuery.get/
            jQuery.get('data3.php', null, function(tsv) {
                var lines = [];
                traffic = [];
                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');
                        traffic.push([
                            date,
                            parseInt(line[1].replace(',', ''), 10)
                        ]);
                    });
                } catch (e) {  }
                options.series[0].data = traffic;
                chart = new Highcharts.Chart(options);
            });
        });

标题：{ 文字：“捕获者温度”， x:-20/中心 },

                },
                tooltip: {
                    formatter: function() {
                      return Highcharts.dateFormat('%H:%M', this.x-(1000*3600)) +' - <b>'+ this.y + ' degres</b>';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'Degres',
                shadow : true,
            tooltip : {
                         valueDecimals : 2}
                }]
            }
            // Load data asynchronously using jQuery. On success, add the data
            // to the options and initiate the chart.
            // This data is obtained by exporting a GA custom report to TSV.
            // http://api.jquery.com/jQuery.get/
            jQuery.get('data3.php', null, function(tsv) {
                var lines = [];
                traffic = [];
                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');
                        traffic.push([
                            date,
                            parseInt(line[1].replace(',', ''), 10)
                        ]);
                    });
                } catch (e) {  }
                options.series[0].data = traffic;
                chart = new Highcharts.Chart(options);
            });
        });

副标题:{ 文本：“”， x:-20 },

                },
                tooltip: {
                    formatter: function() {
                      return Highcharts.dateFormat('%H:%M', this.x-(1000*3600)) +' - <b>'+ this.y + ' degres</b>';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'Degres',
                shadow : true,
            tooltip : {
                         valueDecimals : 2}
                }]
            }
            // Load data asynchronously using jQuery. On success, add the data
            // to the options and initiate the chart.
            // This data is obtained by exporting a GA custom report to TSV.
            // http://api.jquery.com/jQuery.get/
            jQuery.get('data3.php', null, function(tsv) {
                var lines = [];
                traffic = [];
                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');
                        traffic.push([
                            date,
                            parseInt(line[1].replace(',', ''), 10)
                        ]);
                    });
                } catch (e) {  }
                options.series[0].data = traffic;
                chart = new Highcharts.Chart(options);
            });
        });

xAxis：{ 键入：“日期时间”， 滴答声间隔：3600*1000，//一小时 宽度：0， 网格线宽度：1， 标签：{ 对齐：'居中'， x:-3， y:20， 格式化程序：函数（）{ 返回Highcharts.dateFormat（'%H'，this.value）； } } },

                },
                tooltip: {
                    formatter: function() {
                      return Highcharts.dateFormat('%H:%M', this.x-(1000*3600)) +' - <b>'+ this.y + ' degres</b>';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'Degres',
                shadow : true,
            tooltip : {
                         valueDecimals : 2}
                }]
            }
            // Load data asynchronously using jQuery. On success, add the data
            // to the options and initiate the chart.
            // This data is obtained by exporting a GA custom report to TSV.
            // http://api.jquery.com/jQuery.get/
            jQuery.get('data3.php', null, function(tsv) {
                var lines = [];
                traffic = [];
                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');
                        traffic.push([
                            date,
                            parseInt(line[1].replace(',', ''), 10)
                        ]);
                    });
                } catch (e) {  }
                options.series[0].data = traffic;
                chart = new Highcharts.Chart(options);
            });
        });

亚克斯：{ 标题：{ 文本：“度数” },

                },
                tooltip: {
                    formatter: function() {
                      return Highcharts.dateFormat('%H:%M', this.x-(1000*3600)) +' - <b>'+ this.y + ' degres</b>';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'Degres',
                shadow : true,
            tooltip : {
                         valueDecimals : 2}
                }]
            }
            // Load data asynchronously using jQuery. On success, add the data
            // to the options and initiate the chart.
            // This data is obtained by exporting a GA custom report to TSV.
            // http://api.jquery.com/jQuery.get/
            jQuery.get('data3.php', null, function(tsv) {
                var lines = [];
                traffic = [];
                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');
                        traffic.push([
                            date,
                            parseInt(line[1].replace(',', ''), 10)
                        ]);
                    });
                } catch (e) {  }
                options.series[0].data = traffic;
                chart = new Highcharts.Chart(options);
            });
        });

}，
                },
                tooltip: {
                    formatter: function() {
                      return Highcharts.dateFormat('%H:%M', this.x-(1000*3600)) +' - <b>'+ this.y + ' degres</b>';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'Degres',
                shadow : true,
            tooltip : {
                         valueDecimals : 2}
                }]
            }
            // Load data asynchronously using jQuery. On success, add the data
            // to the options and initiate the chart.
            // This data is obtained by exporting a GA custom report to TSV.
            // http://api.jquery.com/jQuery.get/
            jQuery.get('data3.php', null, function(tsv) {
                var lines = [];
                traffic = [];
                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');
                        traffic.push([
                            date,
                            parseInt(line[1].replace(',', ''), 10)
                        ]);
                    });
                } catch (e) {  }
                options.series[0].data = traffic;
                chart = new Highcharts.Chart(options);
            });
        });

工具提示：{
格式化程序：函数（）{
返回Highcharts.dateFormat（“%H:%M”，this.x-（1000*3600））+'-'+this.y+'degres'；
}
},
                },
                tooltip: {
                    formatter: function() {
                      return Highcharts.dateFormat('%H:%M', this.x-(1000*3600)) +' - <b>'+ this.y + ' degres</b>';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'Degres',
                shadow : true,
            tooltip : {
                         valueDecimals : 2}
                }]
            }
            // Load data asynchronously using jQuery. On success, add the data
            // to the options and initiate the chart.
            // This data is obtained by exporting a GA custom report to TSV.
            // http://api.jquery.com/jQuery.get/
            jQuery.get('data3.php', null, function(tsv) {
                var lines = [];
                traffic = [];
                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');
                        traffic.push([
                            date,
                            parseInt(line[1].replace(',', ''), 10)
                        ]);
                    });
                } catch (e) {  }
                options.series[0].data = traffic;
                chart = new Highcharts.Chart(options);
            });
        });

图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“顶部”，
x:-10，
y:100，
边框宽度：0
},
                },
                tooltip: {
                    formatter: function() {
                      return Highcharts.dateFormat('%H:%M', this.x-(1000*3600)) +' - <b>'+ this.y + ' degres</b>';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'Degres',
                shadow : true,
            tooltip : {
                         valueDecimals : 2}
                }]
            }
            // Load data asynchronously using jQuery. On success, add the data
            // to the options and initiate the chart.
            // This data is obtained by exporting a GA custom report to TSV.
            // http://api.jquery.com/jQuery.get/
            jQuery.get('data3.php', null, function(tsv) {
                var lines = [];
                traffic = [];
                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');
                        traffic.push([
                            date,
                            parseInt(line[1].replace(',', ''), 10)
                        ]);
                    });
                } catch (e) {  }
                options.series[0].data = traffic;
                chart = new Highcharts.Chart(options);
            });
        });

系列：[{
名称：'Degres'，
影子：没错，
工具提示：{
数值小数：2}
}]
}
//使用jQuery异步加载数据。成功后，添加数据
//选择选项并启动图表。
//该数据通过将GA自定义报告导出到TSV获得。
// http://api.jquery.com/jQuery.get/
get（'data3.php'，null，函数（tsv）{
var行=[]；
流量=[]；
试一试{
//将返回的数据拆分为行并对其进行分析
tsv=tsv.分割（/\n/g）；
jQuery.each（tsv，函数（i，行）{
line=line.split（/\t/）；
date=date.parse（第[0]+'UTC'行）；
交通，推([
日期，
parseInt（第[1]行）。替换（'，'，''），10）
]);
});
}捕获（e）{}
options.series[0]。数据=流量；
图表=新的高点图表。图表（选项）；
});
});

所以现在。。。有人能帮我让我的图表在一个以上的联赛中运行吗

提前谢谢，我想说我在这件事上有点不知所措

感谢您阅读了所有内容：-）

添加第二行：

series: [{
  name: 'Degres',
  shadow: true,
  tooltip: {
      valueDecimals: 2
  }
}, {
  name: 'Second value',
  shadow: true,
  tooltip: {
      valueDecimals: 2
  }
}]

然后定义更多系列数据：

var lines = [],
    traffic = [], 
    secondSeries = [];

添加点：

traffic.push([
  date,
  parseInt(line[1].replace(',', ''), 10)
]);
secondSeries.push([
  date,
  parseInt(line[2].replace(',', ''), 10)
]);

最后，将数据添加到选项：

options.series[0].data = traffic;
options.series[1].data = secondSeries;