Question

我相信我想要完成的任务应该是一项相当普遍的任务，但是我很难让它发挥作用。我只想从包含（对于每个记录）ISO8601时间戳和多个数据点的数据集创建多系列图。数据是JSON格式，我使用的是dojox.charting.chart“Lines”类型。

我已经意识到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 Chart使用J轴数据中的“Offset_ms”字段作为x轴组件？

我已经浏览过教程，API文档并执行了大量Google和Google SO搜索无济于事。我甚至浏览了部分Dojo源代码，特别是StoreSeries.js.uncompressed.js，但我找不到任何答案。当然这是可能的，希望是微不足道的！

Answer 1

不幸的是，官方的dojo文档严重缺乏，我只是想通过浏览dojo源代码来做类似的事情。具体来说，StoreSeries测试的第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 }

来自JSON的Dojo折线图，具有多个系列和常见的x轴

1 个答案: