在一个样条图中显示两个(或更多)?

我是Highcharts的新手,基本上在开发和编码方面......我花了大约一周的时间来调整我在网上找到的一些例子,以制作一个标准图表,可以在一个样条图中显示两个系列数据。

我设法修改了我在网络上找到的样本,以使我的图表能够与单个系列一起工作,但只要我尝试绘制第二个系列,它就不起作用......明确地说,我没有理解它的工作方式。 ..我很确定这并不难,因为我的图表是非常基本的,但我真的不知道该怎么做!

那么让我们从我的情况开始......

  • 我做了一个名为“data3.php”的文件,它连接到一个mysql数据库并返回3列数据:日期,然后是2个不同的温度(我想要显示)。 基本上,data3.php似乎正确地工作,因为结果似乎是正确的(您可以在这里查看:http://www.airone.ch/etienne/graph/high/data3.php)它返回当前的所有数据每天10分钟,格式如下:

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

  • 这里是我生成data3.php文件的代码:

    <?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”的文件,用来显示图表(在这里可以看到:http://www.airone.ch/etienne/graph/high/index2.php)。 我设法修改了我发现的代码,使其与“data3.php”一起工作,但我的问题是它只显示第一个温度而不是第二个温度。 在其他owrds中,我怎样才能修改我的index2.php使它画两条线,或基本上更多(我计划绘制6个不同的温度)? 这是我的index2.php代码:

    在PHP和MySQL中使用Highcharts

    var chart; $(document).ready(function(){var options = {chart:{renderTo:'container',defaultSeriesType:'spline',marginRight:130,marginBottom:25},title:{text:'Temperature du capteur', x:-20 // center},副标题:{text:'',x:-20},xAxis:{type:'datetime',tickInterval:3600 * 1000,//一小时tickWidth:0,gridLineWidth:1, labels:{align:'center',x:-3,y:20,formatter:function(){return Highcharts.dateFormat('%H',this.value);}}},yAxis:{title:{text :'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);
                });
            });
    

  • 所以现在...有人可以帮助我使我的图表与更多的一个系列一起工作吗?

    在此先感谢,我勉强说我在这一切中有点失落......

    问候和喝彩读了一切:-)


    要添加第二行:

    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;
    
    链接地址: http://www.djcxy.com/p/31005.html

    上一篇: Display two (or more) in one spline chart?

    下一篇: JavaScript Chart Library