如何在 C3.js 中隐藏堆积条形图上的条形

Question

我有一个用 C3.js 制作的堆叠条形图，它使用以下代码生成：

stacked_bar_chart = c3.generate({
        bindto: '#stacked_bar_chart_container',
        data: {
            columns: [
               ["Critical", 446, 863], 
               ["High", 1160, 2301],
               ["Medium", 3106, 8258], 
               ["Low", 277, 119], 
               ["Informational", 7374, 23240]
            ],
            type: 'bar',
            groups: [
                ['Low', 'Medium', 'Informational', 'High', 'Critical', 'Unknown']
            ],
        },
        grid: {
            y: {
                lines: [{ value: 0 }]
            }
        },
        axis: {
            x: {
                type: 'category',
                categories: ["Remediated", "Unconfirmed"] // Notice the x-axis has categories
            },
            y: {
                label: 'Number of Findings'
            }
        },       
    });

我试图做到这一点，以便在单击一个按钮时，我能够从图表中隐藏名为 Remediated 的栏。我试图通过执行以下操作来卸载它：

stacked_bar_chart.unload("Remediated");

但这没有效果，我很确定这是因为我使用 type: 'category' 作为 x 轴。我宁愿无论如何都不必卸载数据，以便稍后我可以根据需要重新显示栏而无需再次检索数据。

Answer 1

在 C3.js 参考页面进行了一些研究后，我认为没有简单的 API 功能可以实现这一点，所以我想出了我自己测试过的这个功能的实现我目前正在使用。

首先，通过我这样做的方式，我跟踪了三个独立的全局变量，它们将保存图表中当前的数据，也将保存我们从中删除的数据。这是我决定选择的方式，因为我的图表数据来自 Web 资源，所以每次添加或删除类别时继续进行 AJAX 调用并刷新数据是低效的。

// Our three new variables
var removed_from_stacked_bar = {};
var stacked_bar_categories = ["Remediated", "Unconfirmed"];
var stacked_bar_data = [
               ["Critical", 446, 863], 
               ["High", 1160, 2301],
               ["Medium", 3106, 8258], 
               ["Low", 277, 119], 
               ["Informational", 7374, 23240]
            ];

function initialize_stacked_bar_chart(data, categories) {
    stacked_bar_chart = c3.generate({
        bindto: '#stacked_bar_chart_container',
        data: {
            columns: data, // Coming from the parameter
            type: 'bar',
            groups: [
                ['Low', 'Medium', 'Informational', 'High', 'Critical', 'Unknown']
            ],
        },
        grid: {
            y: {
                lines: [{ value: 0 }]
            }
        },
        axis: {
            x: {
                type: 'category',
                categories: categories // Coming from the parameter
            },
            y: {
                label: 'Number of Findings'
            }
        },       
    });
}

initialize_stacked_bar_chart(stacked_bar_data, stacked_bar_categories);

现在我编写了一个名为 update_stacked_bar_chart() 的函数，它有一个 category 参数，以便删除/添加在调用时从图表传入的 category。

function update_stacked_bar_chart(category) {
    var categoryIndex = stacked_bar_categories.indexOf(category);
    var removed_values = [];
    if (categoryIndex != -1) { // Removing the item since it exists in the bar chart's categories
        stacked_bar_categories.splice(categoryIndex, 1); // Removing the category name from the bar chart's category list
        stacked_bar_data.forEach(function (item, index) {
            var temp = item.splice(categoryIndex + 1, 1); // Removing the value this category held (in-place) in the sublist for each severity
            removed_values.push(temp); // Pushing each removed value into the array of removed values (in order from Critical, High, Medium, Low, Informational).
        });
        removed_from_stacked_bar[category] = removed_values;
    } else { // Re-adding the item if it was not found in the current chart's categories
        stacked_bar_categories.push(category); // Adding the category name to the bar chart's category list
        removed_from_stacked_bar[category].forEach(function (item, index) {
            stacked_bar_data[index].push(item); // Adding the value for each severity into the respective severity list 
        });
        delete removed_from_stacked_bar[category];
    }
    initialize_stacked_bar_chart(stacked_bar_data, stacked_bar_categories); // Remaking the bar chart with the new data and categories.
}

每次调用此函数时，您都可以切换条形图中的任何类别。您可以将它附加到事件侦听器，以便在需要时调用它。

这是一个如何使用它来切换栏的示例：

update_stacked_bar_chart("Remediated"); // Removes the "Remediated" bar
update_stacked_bar_chart("Remediated"); // Re-adds the "Remediated" bar
update_stacked_bar_chart("Remediated"); // Removes the "Remediated" bar
update_stacked_bar_chart("Unconfirmed"); // Removes the "Unconfirmed" bar
update_stacked_bar_chart("Remediated"); // Re-adds the "Remediated" bar
update_stacked_bar_chart("Unconfirmed"); // Re-adds the "Unconfirmed" bar

如何在 C3.js 中隐藏堆积条形图上的条形

How to hide bars on a stacked bar chart in C3.js

javascript

c3.js