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

Question

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

但是，我无法让 x 轴(一个时间序列)显示移动设备的更改大小。我设法做到这一点的唯一方法是破坏图形并从头开始重新创建它。但这阻止了我向图表添加一个很好的过渡，这将是非常好的。
[![桌面 View ][1]][1]

我尝试在 x 轴上使用刻度剔除选项并将最大值设置为 8，但在使用 时，此选项会被忽略。冲洗() 或 调整大小() 方法。

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

Answer 1

我用过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/