从 C3.js 条形图中排除零值答案

【问题标题】：Exclude zero values from a C3.js bar chart从 C3.js 条形图中排除零值
【发布时间】：2016-01-21 10:08:04
【问题描述】：

我们以下面的图表http://c3js.org/samples/chart_bar.html为例但将列数据替换为以下数据：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 0, 100, 0, 150, 250],
            ['data2', 130, 0, 140, 200, 0, 50]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }
});

setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, -150, 200, 300, -200, 100]
        ]
    });
}, 1000);

正如我们所见，我们有很多空白或零值条，我们如何删除它并删除空白。（不隐藏，我知道怎么用 CSS 隐藏）

Image example, what should be removed

【问题讨论】：

你真的想在 x-ticks 之间有不同的空格吗？ here
我不是，但客户确实想要:)
做过 >this
似乎对我没有帮助，我需要在 CHART BAR 上进行一些更改，而不是使用轴
希望你能找到自己的方法，伙计！在我看来，这件事是您不能保证也不能说不可能的客户问题之一！

标签： c3.js

【解决方案1】：

在https://github.com/c3js/c3/issues/81 中搜索到您需要将 0 替换为 'null' 并添加：

    line: {
     connectNull: true,
    },

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, null, 100, null, 150, 250],
            ['data2', 130, null, 140, 200, null, 50]
        ],
        line: {
         connectNull: true,
        },
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }
});

setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, -150, 200, 300, -200, 100]
        ]
    });
}, 1000);

【讨论】：

我只在数据中使用了 null 并且它有效。我没有使用 connectNull: true。谢谢。

【解决方案2】：

只需添加

line: {
     connectNull: true,
    }

在您的 c3.generate 块中。它将连接图表上的所有点/条/...，其间有一个零值。它适用于null 以及0。

【讨论】：