c3.js: 从 x 轴删除类别

Question

我花了很多时间阅读 c3 的文档和示例，但未能找到使用 API 函数从图表中卸载或隐藏类别的方法。删除线条或条形很容易，但事实证明删除 x 轴类别更具挑战性。这是我的图表的简化版本。

    var genderChart = c3.generate({
    bindto: '#chart-gender',
    data: {
        json: [
          {
            Disease:"Mumps",
            "Female":231,
            "Male":198
          },
            Disease:"Tuberculosis",
            "Female":18,
            "Male":197
          }
        ],

        type: 'bar',
        keys: {
            x: "Disease",
            value: ["Female","Male"]
        },
        selection: {
            enabled: true,
            grouped: true
        },
    },

    axis: {
        x: {
            type: 'category',
        }        
    },
});

我想动态显示和隐藏（加载和卸载）疾病。例如，我希望能够打开和关闭结核病。我的实际图表有许多其他疾病。如果我构建数据，使疾病为条形，性别为 x 轴，这将很容易。但是，这不是我希望用这张图表显示的比较。 c3可以吗？我如何 select 具有给定 x 值（疾病）的所有值，然后卸载这些数据点？我很感激任何见解。

Answer 1

我会构建 json 数据对象，然后重新呈现图表。

这是一个例子：

var data = [{
    Disease: "Mumps",
    Female: 231,
    Male: 198
}, {
    Disease: "Tuberculosis",
    Female: 18,
    Male: 197
}];

$("button").click(function () {
    Render();
});

Render()

function Render() {

    var selectedData = [];
    if ($("#mumps").prop("checked")) selectedData.push(data[0]);
    if ($("#tb").prop("checked")) selectedData.push(data[1]);

    var genderChart = c3.generate({
        data: {
            json: selectedData,

            type: 'bar',
            keys: {
                x: "Disease",
                value: ["Female", "Male"]
            },
            selection: {
                enabled: true,
                grouped: true
            },
        },

        axis: {
            x: {
                type: 'category',
            }
        },
    });
}

这是 fiddle 中的代码： http://jsfiddle.net/ot19Lyt8/14/

c3.js: 从 x 轴删除类别

c3.js: Remove categories from x-axis

c3.js