用真实数据修改道场图 x 轴
Modify dojo chart x axis with real data
问题:如何从日期列构建道场图的 X 轴?
我正在尝试为 Dojo 多系列折线图的 x 轴创建自定义 addAxis(( 函数。
传入的 JSON 数据存储在可观察内存 dstore 中,通过 xhr 从 PHP 脚本中检索,如下所示:
{"Date":1415854800,"Pressure1":23.2312,"Pressure2":17,"Pressure3":0,"Pressure4":0},
{"Date":1415913460,"Pressure1":25.0123,"Pressure2":17,"Pressure3":0.015,"Pressure4":0},...
该"日期"字段是通过 MySQL 的 Date 列上的 UNIX_TIMESTAMP(( 的 Unix 纪元时间戳。不一定是这样,但我尝试了很多食谱,这是最新的食谱。
我的自定义函数如下所示:
var data = new Memory({data:myjsondata});
...
labelFunc: function(n) {
var d = dates.get(n).Date;
alert(d);
}
就addSeries而言,"data"对象很好:addSeries((可以正确绘制所有4个压力。这是最难的部分。通常。
Dojo 图表接受 dstore、store 和 DataTable 对象,可能还有其他数据类型,但"API 参考"(在任何其他项目中也称为"简要概述/教程"(只提供这些对象的有限配方,以及无用的硬编码数组示例。
数据对象也没有真正记录下来,我没有时间阅读源代码并找出黑客,此外,似乎有许多过时的数据对象迭代。很容易迷路,这正是我所在的地方。
那日期.get(n(。Date 引发异常,因为"日期"未定义。根据我正在使用的版本的最新文档,这是一种方法。或。如果此版本的内存 dstore 对象文档没有错误。
问:如何从日期列构建道场图的 X 轴?
我可以使数据看起来像任何东西,但 X 轴需要反映该日期值,并且行中的所有其他字段都是该日期的 Y 轴值。
诀窍似乎是在 JSON MySQL 输出中添加一个"id"列,并通过 Memory 构造函数中的 idProperty 将该 id 字段设置为内存对象 id,如以下示例所示:
在 PHP 代码中:
...
$stmt = $conn->prepare("@i := 0");
$stmt->execute();
$stmt = $conn->prepare("SELECT @i:=@i+1 AS id, myDate, myVal1, myVal2 FROM T_BlahBlah");
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Might need to convert some "null"s to NULL
// Toss the "null" strings
array_walk_recursive($data, function(&$item, $key) {
if ($item == 'null' || $item == NULL) $item = NULL;
});
echo json_encode($data, JSON_NUMERIC_CHECK);
现在,您的 JSON 如下所示:
[{"id":1,"myDate":"2014-12-01","myVal1":2.22,"myVal2":0.77},
{"id":2,"myDate":"2014-12-02","myVal1":4.92,"myVal2":1.14},...
用于获取此数据的 JavaScript 如下所示:
...
function(ready, Chart, StoreSeries, Claro, Legend,
Default, Markers, Tooltip,
Magnify, SelectableLegend,
Memory, Observable, SimpleQueryEngine, lang, arr,
xhr, domConstruct, dom, aspect){
xhr.get({
url: "blahDatum.php",
sync: true,
handleAs: "json"
}).then(function(data){
store = Observable(new Memory({data:data, idProperty:"id"}));
});
// Create the chart within it's "holding" node
var chart = new dojox.charting.Chart("chartNode");
// Set the theme
chart.setTheme(Claro);
chart.addPlot("default", {
type: Markers,
markers: true,
interpolate: true,
tension: "X"
});
chart.addAxis("x", {
title: "Date",
titleOrientation: "away",
includeZero: false,
rotation: -30,
minorTicks: false,
labelFunc: function(n) {
var row = store.get(n);
if (row !== null && row !== undefined) {
var date = new Date(row.Date);
return date.toLocaleDateString();
}
}
});
.... // addSeries, legend, etc
一旦我在 Memory(( 构造函数中设置 idProperty,一切都点击到位。
这个答案还解释了如何使用数据库中的 ISO 日期添加 X 轴。
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- 正在将数据主题添加到所有项目
- 函数参数中的数据与指定变量之间的任何性能差异
- 在VanillaJS中模拟模型双向数据绑定
- CSS-如何定位内容数据标题
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 序列化数据属性中对象的最可靠方法
- 如何将JSON数据导入我的ejs模板
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 如何使用javascript将数据:image/png:base64.解码为真实图像
- 如何创建每秒更新真实数据的Hight Charts图表
- Breeze不会用其真实数据替换Ref:节点
- AngularJS / Karma 单元测试与真实的 XHR 数据 / passThrough()
- _.map() 在播放真实数据时不起作用
- 用真实数据修改道场图 x 轴
- 如何生成在图表中看起来真实的假数据
- 用星号代替javascript中的真实数据