Highchart來自兩個向量的情節：分裂向量？

我想繪製屬性「值」和「日期」的數據點。問題是，格式是數據：[[...], [...]]其中第一個括號是'value'和第二個'date'。我想知道如何分解兩個向量，即從每個向量中取一個值並將其放入該格式以創建數據點。也許還有其他方法可以做到這一點？Highchart來自兩個向量的情節：分裂向量？

「價值」被存儲爲$data[] = $row['value']; 「日期」存儲爲$data2[] = $row['date'];

完全正常的代碼只有一個工作載體「價值」樓下：

<!DOCTYPE html> 
<html> 
<head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>My first column chart by Highcharts</title> 
     <!-- 1. Add JQuery and Highcharts in the head of your page --> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 

     <!-- 2. You can add print and export feature by adding this line --> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script> 


     <!-- 3. Add the JavaScript with the Highchart options to initialize the chart --> 
     <script type="text/javascript"> 


<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 


<?php 
$con=mysql_connect('localhost','root',''); 
mysql_select_db("sensordb", $con); 
$result=mysql_query('select value, date from data'); 
while($row = mysql_fetch_array($result)) { 

    $data[] = $row['value']; 
    $data2[] = $row['date']; 

} 
?> 


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

    <script type="text/javascript"> 

$(function() { 
    $('#container').highcharts({ 
     title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20 
     }, 
     xAxis: { 

     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      valueSuffix: '°C' 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [<?php echo join($data, ',') ?>] 
     }] 
    }); 
}); 


</script> 


    </head> 
    <body> 

     <!-- 3. Add the container --> 
     <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>  

    </body> 
</html>

來源

2016-02-26 Lennart

我對實際問題不清楚。爲什麼你要創建兩個數組，如果你的目標是用一個日期/值對創建一個數組？ – jlbriggs

因爲我不知道該怎麼做。我可以把它放到一個數組中，但是如何從數組中分割數據。它將被渲染爲相同類型的幾個點，即'日期'和'值'將被繪製在X軸上，就好像是相同的類型。 – Lennart

你想讓這個圖表看起來像什麼？你想要日期作爲一個系列，並作爲另一個值？這很不尋常。但是，如果這是您的目標，那麼您當前的設置不起作用？它看起來像你正在創建兩個數組，你的日期之一，你的值之一 – jlbriggs

所以根據您的意見，你需要你的數據爲標準格式

data: [[date,value],[date,value]...]

這是一個非常不同的東西從分裂d ata分成兩個陣列。 :)

藉此：

$data[] = $row['value']; 
$data2[] = $row['date'];

它改成這樣：

$data[] = array($row['date'],$row['value']);

請記住，你的日期將需要在紀元格式，如毫秒，你需要json_encode數組。

您還需要確保您的值是數值型的，方法是將它們轉換爲整數或浮點數，具體取決於它們的期望值。

你可以在正確的格式像這樣的日期和值：

$data[] = array(
    strtotime($row['date']) * 1000, //convert to epoch time, multiply for milliseconds 
    (float)$row['value'] //cast value as a float; use (int) to cast as integer 
);

當您將數據添加到圖表，試試這樣：

series:[{ 
    data: <?echo json_encode($data); ?> 
}]

（注意，我不包括括號 - json_encode（）已經這樣做了）

來源

2016-02-26 14:10:31 jlbriggs

我得到的輸出「[[934920422000,1]] [[934920422000,1]，[935006822000,2]] [[] [] 934920422000,1]，[935006822000,2]，[935093222000,3]] [[934920422000,1]，[935006822000,2]，[935093222000,3]，[935179622000,4]] [[934920422000,1]，[ 935006822000,2]，[935093222000,3]，[935179622000,4]，「當我回聲json_encode（$ data）;所以它應該可以正常工作，但它似乎並不想在使用數據時繪製數據：<？echo json_encode（$ data）; ？>。在$ data中有一些雙括號，即「..]] [[..」也許這可能會導致它 – Lennart

或者可能是由於格式i。e數據：[[5,2]，[6,3]，[8,2]]即每個括號之間需要逗號 – Lennart

格式應該是：data：[[date，value]，[date ，value]，[date，value]]將整個數組包裝在一組括號中，每個x，y對用自己的括號括起來，用逗號分隔。據我所知，我提供的代碼應該完全是這樣。 – jlbriggs

Highchart來自兩個向量的情節：分裂向量？

回答

相關問題