来自 JSON 的 Dojo 折线图,具有多个系列和公共 x 轴



我相信我想要完成的任务应该是一个相当普遍的任务,但我很难让它工作。 我只是希望从包含(对于每条记录)一个ISO8601时间戳以及多个数据点的数据集创建一个多系列图。 数据是JSON格式,我使用的是dojox.charting.chart"线"类型。

我已经知道 Dojo 图表无法直接处理基于时间的轴数据,更不用说ISO8601了。 所以我已经处理了将 x 轴转换为自 T0 服务器端以来的毫秒

以下是我的 JSON 的提炼示例摘录:

[{"Offset_ms":0,"CP":250.58368,"TP":181.88211},
{"Offset_ms":360000,"CP":233.18443,"TP":119.94824},
{"Offset_ms":540000,"CP":227.15465,"TP":117.99422},
{"Offset_ms":720000,"CP":222.87495,"TP":117.55895},
{"Offset_ms":896000,"CP":218.19876,"TP":117.64221},
{"Offset_ms":900000,"CP":219.77487,"TP":117.93475}]

以及提炼的JavaScript(假设上面的JSON在变量'sequenceData'中):

var chart = new dojox.charting.Chart("sequenceDataGraph");
chart.addPlot("default", {
    type: "Lines",
    tension: "X"
});
chart.addAxis("x", { labelFunc: labelTimeAxis });
chart.addAxis("y", { vertical: true });
var sequenceDataStore = new dojo.store.Observable(new dojo.store.Memory({
    data: {
        label: "Sequence",
        items: sequenceData
    }
}));
addSequenceDataSeries(chart, sequenceDataStore, "TP");
addSequenceDataSeries(chart, sequenceDataStore, "CP");
chart.render();
function addSequenceDataSeries(chart, sequenceDataStore, sColumnName) {
    chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
                    sColumnName));
}

似乎正在发生的事情是,Dojo Chart 根本没有使用 x 轴数据,而是根据数据点的数量以固定的间隔绘制每个点。 也就是说,每个数据点似乎都被分配了一个序数,例如如果Offset_ms只是 1、2、3...... 由于我的数据点并不总是固定间隔,因此生成的图形会失真。

如何指示 Dojo 图表在 x 轴组件的 JSON 数据中使用"Offset_ms"字段?

我已经搜索了教程,API文档,并执行了许多Google和SO搜索,但无济于事。 我甚至浏览了Dojo源代码的部分内容,特别是StoreSeries.js.uncompacted.js,但我没有找到任何答案。 当然,这是可能的,希望是微不足道的!

不幸的是,官方的道场文档严重缺乏,我只是通过浏览道场源代码才想出如何做类似的事情。具体来说,商店系列测试的第 135 行 http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_StoreSeries.html

StoreSeries 构造函数的第三个参数接受将 X 轴和 Y 轴映射到数据存储中的特定字段的对象。

下面更改代码中的以下行:

chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
                sColumnName));

对此:

chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} }, 
                { x: "Offset_ms", y: sColumnName }));

sColumnName变得{ x: "Offset_ms", y: sColumnName }

最新更新