如何隐藏 chartjs 图表？

Question

我正在使用 chartJS 和 gaugeJS 创建一个仪表板，我添加了按钮以使用 css 折叠 divs（它隐藏了除按钮和标题之外的所有内容），它与gaugeJS、h2、p 等，但不适用于 chartJS。

代码如下：

<div class="case presence maximised">
    <canvas id="presence" height="200" width="250"></canvas>
</div>

div.minimised * {
    display: none;
}

div.minimised button {
    display: block;
}

graph1 = new Chart(document.getElementById("presence"),
    {
        type: "doughnut",
        data: {
            labels: [
                "a",
                "b",
                "c"
                "d"
            ],
            datasets: [{
                data: [1, 1, 1, 1],
                backgroundColor: [
                    "blue",
                    "brown",
                    "grey",
                    "darkcyan",
                ],
                datalabels: {
                    anchor: "start",
                    align: "start",
                    color: "#fff"
                },
                borderColor: function () {
                    return $(".case").css("background-color");
                }
            }]
        },
        options: {
            legend: {
                display: false
            },
            plugins: {
                datalabels: {
                    backgroundColor: function (context) {
                        return context.dataset.backgroundColor;
                    },
                    borderColor: "#fff",
                    borderRadius: 10,
                    display: function (context) {
                        return context.dataset.data[context.dataIndex] > 0;
                    },
                    formatter: function (value, context) {
                        return context.chart.data.labels[context.dataIndex];
                    },
                    offset: 5,
                    padding: 10,
                    font: {
                        weight: "bold",
                        size: 12
                    },
                    margin: 10
                },
                labels: {
                    render: "value",
                    fontColor: "#fff",
                }
            },
            cutout: "75%"
        }
    })

按钮只是add/remove minimised class 到 div 一个js函数

我尝试将 canvas width/height 设置为 0 或 1px in css, visibility: hidden 但是它没有改变任何东西，图表仍然可见并且它的大小没有改变。

编辑：添加了 js 图表代码

Answer 1

我找到了解决方案：我只需要将我的 canvas 放在 div 中。我不知道是不是因为 CSS 或 ChartJS 无法隐藏 canvas' 显示，但现在使用 div 它可以工作（div 是隐藏的，不是只有 canvas).

我从

<div class="case presence maximised">
    <canvas id="presence" height="200" width="250"></canvas>
</div>

至

<div class="case presence maximised">
    <div>
        <canvas id="presence" height="200" width="250"></canvas>
    </div>
</div>

如何隐藏 chartjs 图表？

How can I hide a chartjs chart?

javascript

css

chart.js