在一個樣條圖中顯示兩個（或更多）？

我是Highcharts的新手，基本上是開發和編碼...我花了大約一個星期的時間來適應我在網上找到的一些例子，製作一個標準圖表，可以在一個樣條中顯示兩個數據序列圖表。在一個樣條圖中顯示兩個（或更多）？

我設法修改了我在網上找到的樣本，使我的圖表能夠與單個serie一起工作，但只要我嘗試繪製第二個serie，它就不起作用......明確地說，我沒有理解它的工作方式......我很確定這並不難，因爲我的圖表非常基本，但我真的不知道該怎麼做！

讓我們用我的情況開始......

我做了一個名爲「data3.php」文件連接到MySQL數據庫，並返回數據的3列：日期，然後2個不同的溫度（我想要顯示）。基本上，data3.php似乎爲結果似乎是正確的，以correctely工作（您可以點擊此處查看：http://www.airone.ch/etienne/graph/high/data3.php）它返回所有DATAS當天，在下面的格式，每次10分鐘：

週一，2013 00:00:00 14.0 32.7

這裏10月28日，是我生成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); 

?>

讓我們假設這部分的數據返回工作correctely ED是什麼，我需要在我的圖表繪製...

我現在已經一個名爲用來顯示圖表（此處可見：http://www.airone.ch/etienne/graph/high/index2.php）「index2.php」。我設法修改了我發現的代碼，使其與「data3.php」一起工作，但我的問題是它只顯示第一個溫度而不是第二個溫度。在其他owrds中，我怎樣才能修改我的index2.php使它畫兩條線，或基本上更多（我計劃繪製6個不同的溫度）？這裏是我的index2.php代碼：

使用PHP與MySQL

VAR圖Highcharts; $（document）。就緒（函數（）{ VAR選項= { 圖表：{ renderTo： '容器'， defaultSeriesType： '花鍵'， marginRight：130， marginBottom：25 }，標題：{ 文本：「溫度杜capteur」， X：-20 //中心 }，字幕：{ 文本： ''， X：-20 }， XAXIS：{ 類型： '日期時間'， tickInterval：3600 * 1000 ，//一小時 tickWidth：0， gridLineWidth：1，標籤：{ 對齊： '中心'， X：-3， Y：20，格式化：函數（）{ 返回Highcharts.dateFormat（ '％H'，這。值）; }} } ， 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); 
      }); 
     });

所以，現在...有人可以幫助我使我的圖表工作更多的一個系列？

在此先感謝，我搞亂說我在這一切有點損失...

問候和布拉沃已經閱讀一切:-)

來源

2013-10-28 user2928359

要添加第二行：

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;

來源

2013-10-29 13:06:05

在一個樣條圖中顯示兩個（或更多）？

回答

相關問題