Question

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

但是，我无法获得x轴（时间序列）来显示移动设备的更改大小。我设法做到这一点的唯一方法是销毁图表并从头开始重新创建。但这阻止了我向图表添加一个很好的转换，这将是非常好的。 [！[桌面视图] [1]] [1]

我尝试在x轴上使用tick culling选项并将最大值设置为8，但在使用 flush（）或 resize（）方法。

所以我的问题是：有没有办法改变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/

Answer 2

根据设备尺寸添加 mediaquery

像这样。

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

C3.js响应x轴时间序列

2 个答案: