来自两个向量的高图图:拆分向量


Highchart plot from two vectors: split the vectors?

我想绘制具有属性"值"和"日期"的数据点。问题是,格式是数据:[[...], [...]]第一个括号是"值",第二个括号是"日期"。我想知道如何拆分两个向量,即从每个向量中获取一个值并将其放入该格式以创建一个数据点。也许还有其他方法可以做到这一点?

"值"存储为$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>

因此,根据您的评论,您需要以标准格式的数据

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

这与将数据拆分为两个数组非常不同。 :)

拿着这个:

$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() 已经这样做了)