【问题标题】:Dojo Line chart from JSON with multiple series and common x-axis来自 JSON 的 Dojo 折线图,具有多个系列和公共 x 轴
【发布时间】:2012-06-16 15:18:15
【问题描述】:

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

我已经知道 Dojo 图表无法直接处理基于时间的轴数据,更不用说 ISO8601。所以我已经处理了将 x 轴转换为 ms-since-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 将 JSON 数据中的“Offset_ms”字段用于 x 轴组件?

我浏览了教程、API 文档并执行了大量 Google 和 SO 搜索,但均无济于事。我什至浏览了 Dojo 源的部分内容,尤其是 StoreSeries.js.uncompressed.js,但我没有找到任何答案。这当然是可能的,而且希望是微不足道的!

【问题讨论】:

    标签: javascript dojo dojox.charting


    【解决方案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 }

    【讨论】:

    • 谢谢,它有效!作为后续行动,我究竟应该如何了解这种初始化称为“值”的第三个 ctor arg 的替代方法?来自 Dojo API 文档:“函数,它接受一个对象句柄,并产生一个可能检查商店项目的输出。或者一个字典对象,它告诉从对象中提取什么名称以及如何将它们映射到输出。或者字符串,这是一个用于绘图的数字字段名称。如果未定义、空或空字符串(默认),则提取“值”字段。 -- 这很好,但没有关于字典键/val 可以是什么!
    猜你喜欢
    • 2019-05-07
    • 1970-01-01
    • 1970-01-01
    • 2023-02-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多