使用C3JS（时间序列）在x轴上具有多个值 [英] Multiple Values on x Axes With C3JS ( Timeseries )
本文介绍了使用C3JS（时间序列）在x轴上具有多个值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个很好的图形：
我也为蓝色部分（Area-Spline）提供了此数组。
I also have this array for the blue part ( Area-Spline ).
["x2", "2015-01-05 00:00:00", "2015-01-12 00:00:00", "2015-01-19 00:00:00", "2015-01-26 00:00:00", "2015-02-02 00:00:00", "2015-02-09 00:00:00", "2015-02-16 00:00:00", "2015-02-23 00:00:00", "2015-03-02 00:00:00", "2015-03-09 00:00:00", "2015-03-16 00:00:00", "2015-03-23 00:00:00", "2015-03-30 00:00:00", "2015-04-06 00:00:00", "2015-04-13 00:00:00", "2015-04-20 00:00:00", "2015-04-27 00:00:00", "2015-05-04 00:00:00", "2015-05-11 00:00:00", "2015-05-18 00:00:00", "2015-05-25 00:00:00", "2015-06-01 00:00:00", "2015-06-08 00:00:00", "2015-06-15 00:00:00", "2015-06-22 00:00:00", "2015-06-29 00:00:00", "2015-07-06 00:00:00", "2015-07-13 00:00:00", "2015-07-20 00:00:00", "2015-07-27 00:00:00", "2015-08-03 00:00:00", "2015-08-10 00:00:00", "2015-08-17 00:00:00", "2015-08-24 00:00:00", "2015-08-31 00:00:00", "2015-09-07 00:00:00", "2015-09-14 00:00:00", "2015-09-21 00:00:00", "2015-09-28 00:00:00", "2015-10-05 00:00:00", "2015-10-12 00:00:00", "2015-10-19 00:00:00", "2015-10-26 00:00:00", "2015-11-02 00:00:00", "2015-11-09 00:00:00", "2015-11-16 00:00:00", "2015-11-23 00:00:00", "2015-11-30 00:00:00", "2015-12-07 00:00:00", "2015-12-14 00:00:00", "2015-12-21 00:00:00", "2015-12-28 00:00:00", "2016-01-04 00:00:00", "2016-01-11 00:00:00", "2016-01-18 00:00:00", "2016-01-25 00:00:00", "2016-02-01 00:00:00"]
图中的圆圈具有以下日期值：
The circles on the graph have this date value :
["x1", "2013-12-30 00:00:00", "2014-01-06 00:00:00", "2014-01-13 00:00:00", "2014-01-20 00:00:00", "2014-01-27 00:00:00", "2014-02-03 00:00:00", "2014-02-10 00:00:00", "2014-02-17 00:00:00", "2014-02-24 00:00:00", "2014-03-03 00:00:00", "2014-03-10 00:00:00", "2014-03-17 00:00:00", "2014-03-24 00:00:00", "2014-03-31 00:00:00", "2014-04-07 00:00:00", "2014-04-14 00:00:00", "2014-04-21 00:00:00", "2014-04-28 00:00:00", "2014-05-05 00:00:00", "2014-05-12 00:00:00", "2014-05-19 00:00:00", "2014-05-26 00:00:00", "2014-06-02 00:00:00", "2014-06-09 00:00:00", "2014-06-16 00:00:00", "2014-06-23 00:00:00", "2014-06-30 00:00:00", "2014-07-07 00:00:00", "2014-07-14 00:00:00", "2014-07-21 00:00:00", "2014-07-28 00:00:00", "2014-08-04 00:00:00", "2014-08-11 00:00:00", "2014-08-18 00:00:00", "2014-08-25 00:00:00", "2014-09-01 00:00:00", "2014-09-08 00:00:00", "2014-09-15 00:00:00", "2014-09-22 00:00:00", "2014-09-29 00:00:00", "2014-10-06 00:00:00", "2014-10-13 00:00:00", "2014-10-20 00:00:00", "2014-10-27 00:00:00", "2014-11-03 00:00:00", "2014-11-10 00:00:00", "2014-11-17 00:00:00", "2014-11-24 00:00:00", "2014-12-01 00:00:00", "2014-12-08 00:00:00", "2014-12-15 00:00:00", "2014-12-22 00:00:00", "2014-12-29 00:00:00", "2015-01-05 00:00:00", "2015-01-12 00:00:00", "2015-01-19 00:00:00", "2015-01-26 00:00:00", "2015-02-02 00:00:00", "2015-02-09 00:00:00", "2015-02-16 00:00:00", "2015-02-23 00:00:00", "2015-03-02 00:00:00", "2015-03-09 00:00:00", "2015-03-16 00:00:00", "2015-03-23 00:00:00", "2015-03-30 00:00:00", "2015-04-06 00:00:00", "2015-04-13 00:00:00", "2015-04-20 00:00:00", "2015-04-27 00:00:00", "2015-05-04 00:00:00", "2015-05-11 00:00:00", "2015-05-18 00:00:00", "2015-05-25 00:00:00", "2015-06-01 00:00:00", "2015-06-08 00:00:00", "2015-06-15 00:00:00", "2015-06-22 00:00:00", "2015-06-29 00:00:00", "2015-07-06 00:00:00", "2015-07-13 00:00:00", "2015-07-20 00:00:00", "2015-07-27 00:00:00", "2015-08-03 00:00:00", "2015-08-10 00:00:00", "2015-08-17 00:00:00", "2015-08-24 00:00:00", "2015-08-31 00:00:00", "2015-09-07 00:00:00", "2015-09-14 00:00:00", "2015-09-21 00:00:00", "2015-09-28 00:00:00", "2015-10-05 00:00:00", "2015-10-12 00:00:00", "2015-10-19 00:00:00", "2015-10-26 00:00:00", "2015-11-02 00:00:00", "2015-11-09 00:00:00", "2015-11-16 00:00:00"…]
此是x轴在图上显示的。
This is the the x axes what is shown on the graph.
您可以看到我有多个x轴值（2个不同的日期数组）。
As you can see i have multiple values for the x axes ( 2 different date array ).
第一个开始于2013-12-03，而第二个开始于2015年。
The first one starts at 2013-12-03 but the second one, as shown above starts at 2015.
如何绘制第二个数组，而不是从2013年而不是2013年开始？
How can i draw the second array to start at 2015 instead instead of 2013?
图形代码：
chart = c3.generate({
point: {
r: function (d) {
if (d.id == 'A. v. Hensbergen') {
d.parkeerduur = parking_duur_hensbergen[d.index];
return d.parkeerduur;
}
if (d.id == 'Gemeentehuis') {
d.parkeerduur = parking_duur_gemeentehuis[d.index];
return d.parkeerduur;
}
if (d.id == 'Tricotage') {
d.parkeerduur = parking_duur_tricotage[d.index];
return d.parkeerduur;
}
if (d.id == 'Coornhertpad') {
d.parkeerduur = parking_duur_coornhertpad[d.index];
return d.parkeerduur;
}
if (d.id == 'Duivenweide') {
d.parkeerduur = parking_duur_duivenweide[d.index];
return d.parkeerduur;
} else {
return 3;
}
}
},
xs: {
'data1': 'x1',
'passanten': 'x2'
},
bindto: '#chatterplot_elastic',
data: {
colors: {
passanten: '#007bb0'
},
x: 'x1',
// @todo should be different based on interval selector.
xFormat: '%Y-%m-%d %H:%M:%S',
columns: [
getParkingDates(),
PassantenData,
PassantenDatesData,
PassantenData,
HensbergenData,
GemeentehuisData,
CoornhertpadData,
DuivenweideData,
TricotageData
],
axes: {
'passanten': 'y',
'time_period': "x",
'A. v. Hensbergen': 'y2',
'Gemeentehuis': 'y2',
'Coornhertpad': 'y2',
'Duivenweide': 'y2',
'Tricotage': 'y2'
},
types: {
passanten: 'area-spline',
'A. v. Hensbergen': 'scatter',
'Gemeentehuis': 'scatter',
'Coornhertpad': 'scatter',
'Duivenweide': 'scatter',
'Tricotage': 'scatter'
},
onclick: function (e) {
updateGraphMapper(e);
}
},
axis: {
y: {
label: {
text: 'Passanten',
position: 'outer-middle'
}
},
y2: {
show: true,
min: 0,
max: 100,
padding: {top: 0, bottom: 0},
label: {
text: 'Bezettingsgraad %',
position: 'outer-middle'
}
},
x: {
type: 'timeseries',
localtime: true,
tick: {
format: formatX,
rotate: 75,
multiline: false,
culling: {
max: 60,
},
},
},
},
});
}
推荐答案
删除此字符串 x：'x1'，
之后，您必须为每个行名称设置 xs 参数，如下所示：
Remove this string x: 'x1',
After you must set xs param for each line name like this:
xs: {
'data1': 'x1',
'passanten': 'x2',
'A. v. Hensbergen': 'x1', // or 'x2'
'Gemeentehuis': 'x1', // or 'x2'
......
'OTHER COLUMN': 'x2', // or 'x1'
},
尝试以下示例查看您的问题：
https://jsfiddle.net/xsLgbhwt/
Try this example to see your problem: https://jsfiddle.net/xsLgbhwt/
这篇关于使用C3JS（时间序列）在x轴上具有多个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
