微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript-来自具有多个系列和通用x轴的JSON的Dojo折线图

我相信我要完成的任务应该是一项相当普通的任务,但是我很难使它起作用.我只是希望从包含(对于每个记录)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 Chart将JSON数据中的“ Offset_ms”字段用于x轴组件?

我已经仔细研究了教程,api文档并执行了许多Google& SO搜索无济于事.我什至浏览了Dojo源代码的某些部分,尤其是StoreSeries.js.uncompressed.js,但是找不到任何答案.当然这是可能的,并且希望是微不足道的!

解决方法:

不幸的是,严重缺乏官方的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}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐