C3.js响应式X轴时间序列。

Question

我想创建一个可以在移动设备和桌面上都能显示好的图表，使用c3 (http://c3js.org/)。

然而，我在移动设备上遇到了困难，无法改变时间序列的 x 轴大小。目前，我唯一的解决方法是销毁并重新创建图表，但这样就不能添加漂亮的过渡效果了，这对我的需求来说非常不利。 [![desktop view][1]][1]

我尝试使用 x 轴上的刻度修整选项，并设置最大值为 8，但是当使用 flush() 或 resize() 方法时，该选项会被忽略。

所以我的问题是：有没有任何方法可以在不销毁图表和重新生成图表的情况下更改 x 轴值？ http://imgur.com/EMECqqB

- Mihail

Answer 1

我使用了onresized: function () {...}

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

链接

在调整大小的屏幕上更改裁剪最大值:

        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/

- chakuhogod

Answer 2

根据设备大小添加媒体查询

就像这样。

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

- nontoxice