如何在 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 了解更多详情。

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

How to get a fill below c3.js timeseries chart

javascript

charts

pubnub

c3.js

PubNub EON 图表类型