用真实数据修改道场图表 x 轴答案

【问题标题】：Modify dojo chart x axis with real data用真实数据修改道场图表 x 轴
【发布时间】：2014-12-01 22:24:42
【问题描述】：

问题：如何从日期列为道场图表构建 X 轴？

我正在尝试为 Dojo 多系列折线图的 x 轴创建自定义 addAxis() 函数。

传入的 JSON 数据存储在 Observable Memory 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 的 UNIX_TIMESTAMP() 在 Date 列上的 Unix 纪元时间戳。不一定，但我尝试了很多食谱，这是最新的。

我的自定义函数如下所示：

var data = new Memory({data:myjsondata});
...
labelFunc: function(n) {
    var d = dates.get(n).Date;
    alert(d);
}

就 addSeries 而言，“数据”对象很好：addSeries() 可以正确绘制所有 4 个压力。那是困难的部分。通常。

Dojo 图表接受 dstore、store 和 DataTable 对象，可能还有其他数据类型，但是“API 参考”（在任何其他项目中也称为“简要概述/教程”）仅提供了这些对象的有限配方，并且无用的硬编码数组示例。

数据对象也没有真正记录，我没有时间阅读源代码并找出破解方法，此外，似乎有许多过时的数据对象迭代。很容易迷路，而这正是我所在的地方。

dates.get(n).Date 会抛出异常，因为 'Date' 未定义。根据我正在使用的版本的最新文档，这是一种方法。也许。如果此版本的 Memory dstore 对象文档没有错误。

问题：如何从日期列为道场图表构建 X 轴？

我可以使数据看起来像任何东西，但 X 轴需要反映该日期值，并且行中的每个其他字段都是该日期的 Y 轴值。

【问题讨论】：

标签： javascript mysql dojo dojox.charting

【解决方案1】：

看来，诀窍是在 JSON MySQL 输出中添加一个“id”列，并且还通过 Memory 构造函数中的 idProperty 将该 id 字段设置为 Memory 对象 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 轴。

【讨论】：