javascript — несколько значений по осям x с C3JS (временные ряды)

У меня есть этот хороший график:

введите описание изображения здесь

У меня также есть этот массив для синей части (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"]

Круги на графике имеют это значение даты:

["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, что показано на графике.

Как вы можете видеть, у меня есть несколько значений для осей х (2 разных массива дат).

Первый начинается в 2013-12-03, а второй, как показано выше, начинается в 2015 году.

Как я могу нарисовать второй массив, чтобы начать в 2015 году вместо 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,
},
},
},
},
});
}

0

Решение

Удалить эту строку x: 'x1',
После того, как вы должны установить xs param для каждого имени строки, например:

xs: {
'data1': 'x1',
'passanten': 'x2',
'A. v. Hensbergen': 'x1', // or 'x2'
'Gemeentehuis': 'x1', // or 'x2'
......
'OTHER COLUMN': 'x2', // or 'x1'
},

Попробуйте этот пример, чтобы увидеть вашу проблему:
https://jsfiddle.net/xsLgbhwt/

1

Другие решения

Других решений пока нет …