javascript - 如何在 c3.js 时间序列图表下方填充

Question

如何在 c3.js 时间序列图表下方填充，如堆积面积图，但 x 轴剩余时间序列的值。我正在使用 PUBNUB 的 EON 图表库，但它使用 c3.js 作为基础库。

eon.chart({
    pubnub   : pubnub,
    history  : false,
    channel  : 'orbit2',
    flow     : true,
    generate : {
        bindto : '#chart',
        size: {
        height: 240,
        width: 380
    },
        data   : {
            x      : 'x',
            labels : true
        },
        axis : {
            x : {
                type : 'timeseries',
                tick : {
                    format : '%H:%M:%S'
                },
                zoom: {
                   enabled: true
                }
            }
        }
    },
    transform : function(m) {
        return { columns : [
            ['x', new Date().getTime()],
            ['Bytes Written', m.Bytes_Written],
            ['Bytes Read', m.Bytes_Read]

        ] };
    }
});

Answer 1

PubNub EON 图表类型

您只需提供要使用的图表类型。 EON landing page and here is a code sample from one of the examples on that page上有一些示例:

eon.chart({
  channel: channel,
  pubnub: pubnub,
  generate: {
    bindto: '#chart',
    data: {
      labels: true,
      type: 'bar'
    },
    bar: {
      width: {
        ratio: 0.5
      }
    },
    tooltip: {
        show: false
    }
  }
});

请注意在generate EON 参数下配置的data 键。 See c3 docs/examples有关此的更多详细信息。