来自两个向量的高图图:拆分向量
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() 已经这样做了)
相关文章:
- 更改高贴图的缩放级别
- 谷歌地图热图图层点半径
- 如何从高股价图中提取数据
- 显示额外月份的高股价图
- 性能问题高图表图和 socket.io
- 调整高线图系列两侧的间距
- 高阶图阶梯线与间隙和序列,如[x,y]
- 对热点图图层进行动画处理
- 日期未在高股价图的 x 轴上正确显示
- 分组堆叠高图表图中整个堆栈的工具提示
- 从 JSON 在单个高图表图中绘制多个序列
- 来自两个向量的高图图:拆分向量
- 高图表图选项单击事件仅在鼠标停留在块中时触发一次
- 以下标和上标的形式在X轴和Y轴的高线图标题上显示内容
- 使用高线图悬停系列时,增加不同的标记大小
- 如何将次轴添加到高股价图中
- 当我输入秒数时,高线图被打破
- 高线图:给折线图添加标志
- 高线图:柱状图由于间距不一致而有条带
- PHP回显在Javascript变量动态更改饼图图