C3 JS更改X轴，勾选值使图表消失

Question

我是 Javascript 新手，我已经弄清楚了一些事情，但似乎无法弄清楚为什么 X 轴很难改变。我正在使用 C3 库来制作堆叠条形图。当我手动尝试将刻度更改为值数组时：

axis: {
        x : {
            type : {
                tick: {
                    // values: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                    multiline:false,
                    culling: {
                        max: 1
                    },
                },
            },
            label : {
                text: 'Days',
                position: 'center-bottom',

            },

图表不会改变轴上的刻度。我试图更改 X 轴的 Codepen JS 代码行中的第 17 行。任何帮助将不胜感激。

链接到Codepen

Answer 1

首先，tick 声明不应嵌套在 type 声明中，它们应该是彼此的兄弟。因此，C3 不会接收您在 tick 中声明的任何内容。

其次，values 通过匹配声明为包含 x 轴值的数据系列中的值来工作，例如普通图表中的数字或时间序列图表中的日期 --> http://c3js.org/samples/axes_x_tick_values.html 。你的两个系列都没有被声明为保存 x 轴值，而且两者都是数字数据，所以像 "Monday" 之类的字符串永远不会匹配。

第三，那个 codepen 使用的是一个真正过时的 c3 版本（我必须更新它才能让下面的解决方案正常工作），所以运行的 c3 代码对于任何人来说都已经过时了。的 c3 在线文档

我怀疑你在这里寻找的是使用类别类型并将类别声明为：

         x : {
           type: 'category',
           categories:  ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
           tick: {
                multiline:false,
                culling: {
                    max: 1
                },
            },
        },
        ... etc etc...
    },

见https://codepen.io/anon/pen/PjNKya