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有关吗？如何选择具有给定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',
            }
        },
    });
}

这里是小提琴中的代码： http://jsfiddle.net/ot19Lyt8/14/

c3.js：从x轴中删除类别

1 个答案: