我需要根据时间序列绘制折线图,我正在使用c3.js绘制图表,我点击了此链接以达到我的要求。
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%Y',
columns: [
['x', '2010', '2011', '2012', '2013', '2014', '2015','2016'],
['data1', 30, 200, 100, 400, 150, 250, 400],
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
],
axes: {
data2: 'y2'
},
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y'
}
},
y2: {
show: true
}
},
});
此代码可以正常工作。
但是我在使用时间序列时遇到问题,我的图表无法正确显示。
我如何达到我的要求。我需要使用带有数据-时间-秒的时间序列来绘制批量数据。
我的要求是:
['x', '2013-01-01 12:00:00', '2013-01-02 12:00:05', '2013-01-03 12:00:10', '2013-01-04 12:00:15', '2013-01-05 12:00:20', '2013-01-10 12:00:25', '2013-01-15 12:00:30', '2013-02-15 12:00:35'],
['data1', 30, 200, 100, 400, 150, 250, 400],
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%dT%H:%M:%S',
}
},
y2: {
show: true
}
},
X轴值显示为NaN。如何获得符合我要求的合适结果。谢谢。
好吧,您的数据很好。但是您错过了定义时间格式的选项。您可能需要将xFormat
属性添加到数据对象中,并提供正确的格式。
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%Y-%m-%d %H:%M:%S',
columns: [
['x', '2013-01-01 12:00:00', '2013-01-02 12:00:05', '2013-01-03 12:00:10', '2013-01-04 12:00:15', '2013-01-05 12:00:20', '2013-01-10 12:00:25', '2013-01-15 12:00:30', '2013-02-15 12:00:35'],
['data1', 30, 200, 100, 400, 150, 250, 400, 200],
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500, 300],
],
axes: {
data2: 'y2'
},
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d %H:%M:%S',
rotate: -90
}
},
y2: {
show: true
}
},
});
注意该xFormat: '%Y-%m-%d %H:%M:%S'
选项。实际上,这就是您所错过的。这是工作中的小提琴。
希望能帮助到你!!
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句