使用实际数据修改Dojo图表x轴 [英] Modify dojo chart x axis with real data
问题描述
问题:如何从日期"列中为dojo图表构建X轴?
Question: How can I build an X axis for a dojo chart from a Date column?
我正在尝试为Dojo多系列折线图的x轴创建一个自定义的addAxis()函数.
I'm trying to create a custom addAxis() function for the x axis of a Dojo multiseries line chart.
传入的JSON数据存储在Observable Memory dstore中，通过xhr从PHP脚本中检索出来，如下所示:
Incoming JSON data is stored in an Observable Memory dstore, retrieved via xhr from a PHP script, and looks like:
{"Date":1415854800,"Pressure1":23.2312,"Pressure2":17,"Pressure3":0,"Pressure4":0},
{"Date":1415913460,"Pressure1":25.0123,"Pressure2":17,"Pressure3":0.015,"Pressure4":0},...
"Date"字段是在Date列上通过MySQL的UNIX_TIMESTAMP()获得的Unix时代的时间戳.不一定要这样，但是我已经尝试了很多食谱，这是最新的食谱.
That "Date" field is a Unix epochal timestamp via MySQL's UNIX_TIMESTAMP() on a Date column. It doesn't have to be, but I've tried a lot of recipes and that's the latest one.
我的自定义函数如下:
var data = new Memory({data:myjsondata});
...
labelFunc: function(n) {
var d = dates.get(n).Date;
alert(d);
}
就addSeries而言，数据"对象是好的:addSeries()可以正确绘制所有4个压力.那是困难的部分.通常.
The "data" object is good as far as addSeries is concerned: addSeries() can plot all 4 pressures correctly. That's the hard part. Usually.
Dojo图表接受dstore，store和DataTable对象，也可能接受其他数据类型，但是"API参考"(在任何其他项目中也称为简要概述/教程")仅为这些对象提供了有限的配方，并且无用的硬编码数组的示例.
Dojo charts accept dstore, store, and DataTable objects, and probably other data types as well, but the "API Reference" (aka "brief overview/tutorial" in any other project) only provides limited recipes for those objects, and examples of useless hard-coded arrays.
数据对象也没有真正的记录，我没有时间阅读源代码并找出黑手，此外，似乎还有许多过时的数据对象迭代.很容易迷路，而这正是我的所在.
The data objects aren't really documented either, I don't have time to read the source and figure out a hack, and besides, there appear to be many obsolete iterations of data objects. It's easy to get lost and that's exactly where I am.
dates.get(n).Date 引发异常，因为未定义"Date".根据我正在使用的版本的最新文档，这是一种实现方法.可能是.如果此版本的Memory dstore对象文档没有错误.
That dates.get(n).Date throws an exception because 'Date' is undefined. According to the most recent documentation for the version I'm using, that's a way to do it. Maybe. If this version of the Memory dstore object documentation isn't in error.
问题:如何从日期"列中为dojo图表构建X轴?
Question: How can I build an X axis for a dojo chart from a Date column?
我可以使数据看起来像任何东西，但是X轴需要反映该Date值，并且该行中的每个其他字段都是该Date的Y轴值.
I can make the data look like anything, but the X axis needs to reflect that Date value, and every other field in the row is a Y axis value for that Date.
推荐答案
看来，诀窍是在JSON MySQL输出中添加"id"列，并还要设置该id字段通过Memory构造函数中的idProperty作为Memory对象的ID，如本例所示:
The trick, it seems, is to add an "id" column to the JSON MySQL output, and also set that id field as the Memory object id via idProperty in the Memory constructor, as in this example:
在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如下:
Now, your JSON looks like:
[{"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如下:
The JavaScript to grab this data looks like:
...
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，所有的东西都会点击到位.
Everything clicked into place once I set the idProperty in the Memory() constructor.
此答案还说明了如何使用数据库中的ISO日期添加X轴.
This answer also explains how you add an X axis using ISO dates from a database.
这篇关于使用实际数据修改Dojo图表x轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
