C3.js 响应式 x 轴时间序列

Question

我正在尝试使用 c3 (http://c3js.org/) 创建一个在移动设备和桌面设备上看起来都不错的图形。

但是，我无法让 x 轴（时间序列）显示移动设备的更改大小。我设法做到这一点的唯一方法是销毁图形并从头开始重新创建它。但这阻止了我向图表添加一个很好的过渡，这真的很不错。 [![桌面视图][1]][1]

我尝试在 x 轴上使用刻度剔除选项并将最大值设置为 8，但是在使用 flush() 或 resize() 方法。

所以我的问题是：有没有什么方法可以更改 x 轴值而不必破坏图形并重新生成它？ http://imgur.com/EMECqqB

Answer 1

根据设备大小添加mediaquery

像这样。

@media screen and (max-width:810px) {
    .c3 svg { font: .8em sans-serif; }
}

Answer 2

我用过onresized: function () {...}

或者您可以使用 onresize: function () { ... }

link

在调整大小的屏幕上更改剔除最大值：

        axis: {
            x: {
                 type: 'timeseries',
                 tick: {
                    culling: true,
                    format: '%m-%d',
                    fit:true,
                    culling: {
                        max: window.innerWidth > 500 ? 8 : 5
                    }
                }
            }
        },

        onresized: function () {
            window.innerWidth > 500 ? chart.internal.config.axis_x_tick_culling_max = 8 : chart.internal.config.axis_x_tick_culling_max = 5;
        },

举个例子：https://jsfiddle.net/07s4zx6c/2/

C3.js 响应式 x 轴时间序列

C3.js responsive x axis timeseries

responsive-design

c3.js