Question

我有这个漂亮的图表：

我也有蓝色部分（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轴。

如您所见，我有多个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,
            },
          },
        },
      },
    });
  }

Answer 1

删除此字符串x: 'x1', 必须为每个行名称设置xs参数后，如下所示：

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

尝试此示例来查看您的问题： https://jsfiddle.net/xsLgbhwt/

具有C3JS的x轴上的多个值（时间序列）

1 个答案: