我需要根据时间序列绘制折线图。我正在使用 c3.js 绘制我的图表。我遵循了 this link达到我的要求。
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' 选项。其实这就是你错过的。这是一个有效的 fiddle .
希望对您有所帮助!
关于javascript - 如何在 c3.js 图表中使用时间序列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50450502/