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 行。任何帮助将不胜感激。

Link 到 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

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

C3 JS Change X Axis, ticking values makes the chart disappear

javascript

axis

graph

c3.js