为什么我的 Chart.JS 画布没有被破坏？答案

【问题标题】：Why is my Chart.JS canvas not destroying?为什么我的 Chart.JS 画布没有被破坏？
【发布时间】：2021-04-01 19:18:01
【问题描述】：

我目前在使用 Chart.JS 时遇到问题，尤其是在销毁多个图表时。

设置：

我正在通过他们的 API 调用地理数据服务，然后在其下方的图表上显示点击多边形的统计信息。我试图以编程方式将这些图表和相关数据分配到一个对象数组中，称为chartPropertyArray。每个数组对象都包含变量、数据和图表变量（参见下面的对象结构）。

事情是这样设置的，所以每个 Chart.JS Canvas 对象 (varChart) 和 Chart.JS 所需的相关上下文信息 (ctx)（见下文）。

问题：

因为必须将每个图表分配给要销毁的唯一变量，所以图表被放置在chartPropertyArray 中的相应对象中。

我正在尝试遍历这些对象并销毁数组中的所有图表，但这不起作用。更多图表不断添加。我做错了什么？

chartPropertyArray的结构：

var chartPropertyArray = [
                {"variable": "popnChart", 
                    "data": [],
                    "label": "Total Population",
                    "ctx": "",
                    "varChart": ""
                },
                {"variable": "densityChart", 
                    "data": [59, 24, 2],
                    "label": "Population Density",
                    "ctx": "",
                    "varChart": ""
                }, 
                {"variable": "familiesChart", 
                    "data": [3, 5, 1],
                    "label": "Family Size",
                    "ctx": "",
                    "varChart": ""
                }, 
                {"variable": "incomeChart", 
                    "data": [12, 45, 78],
                    "label": "Average Income",
                    "ctx": "",
                    "varChart": ""
                }
            ]

使用 Chart.JS 创建图表所需的设置：

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx,
   ...

使用此方法创建图表的示例：

i = 0
while (i < chartPropertyArray.length) {
  properties = chartPropertyArray[i]
  properties["ctx"] = document.getElementById(properties.variable).getContext('2d');
  properties["varChart"] = new Chart(properties.ctx, {
    ...
  i++
}

使用此方法销毁图表的示例：

i = 0
while (i < chartPropertyArray.length) {
  properties = chartPropertyArray[i]
  properties.varChart.destroy()
  i++
}

【问题讨论】：

您是否尝试过执行类似 if 语句的操作，如果未定义或为空图表则销毁图表？如果你需要一个例子，请告诉我。但它只是一个基本的 if 语句或条件。
感谢您的快速回答！这对我来说完全是一个问题，尽管你的评论是个好主意。我在下面发布了我做错了什么。

标签： javascript charts chart.js

【解决方案1】：

好吧，这完全是我的错。有一个函数将测试图表设置为 0（基本上在启动时创建空白图表），该函数设置为不同的变量。这意味着总是有两张图表（总共四对图表）相互重叠，即使我每次都成功地破坏了一张图表。

感谢您的快速反馈:)

【讨论】：