Question

问题：如何从Date列为dojo图表构建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},...

“Date”字段是通过MySQL的UNIX_TIMESTAMP（）在Date列上的Unix epochal时间戳。它不一定是，但我尝试了很多食谱，这是最新的食谱。

我的自定义功能如下：

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 Reference”（在任何其他项目中也称为“简要概述/教程”）仅为这些对象提供有限的配方，以及无用的硬编码数组的例子。

数据对象也没有真正记录，我没有时间阅读源代码并弄清楚黑客攻击，此外，似乎有许多过时的数据对象迭代。这很容易迷失，而这正是我所在的地方。

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

问题：如何从Date列为dojo图表构建X轴？

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

Answer 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轴。

使用实际数据修改dojo图表x轴

1 个答案: