Chart.js 图表JS-动态加载时，气泡图不会被渲染

如果有人能帮我解决查特Js泡泡图的问题，我会很高兴

我正在根据下拉选择中的更改动态加载图表

• 开关箱如下：

    case "bar":
    case "bubble":
    case "line":
        return {
            type: value,
            data: {
                labels: labels,
                datasets: [
                    {
                        data: data,
                        fill: false,
                        backgroundColor: colorCodes.chartBackGroundColor,
                        borderWidth: 1,
                        borderColor: colorCodes.chartGraphBorderColor,
                        hoverBorderWidth: 2
                    }
                ]
            },
            options: {
                title: {
                    display: false
                },
                legend: {
                    display: false
                },
                layout: {
                    padding: 20
                },
                responsive: true,
                maintainAspectRatio: false,
                hover: {
                    animationDuration: 0
                },
                tooltips: {
                    enabled: false
                },
                animation: {
                    "duration": 1,
                    "onComplete": function () {
                        if (data.length > 0) {
                            var chartInstance = this.chart,
                                ctx = chartInstance.ctx;
                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize,
                                Chart.defaults.global.defaultFontStyle,
                                Chart.defaults.global.defaultFontFamily);
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';
                            this.data.datasets.forEach(function (dataset, i) {
                                var meta = chartInstance.controller.getDatasetMeta(i);
                                meta.data.forEach(function (bar, index) {
                                    var data = data[index];
                                    ctx.fillText(data, bar._model.x, bar._model.y);
                                });
                            });
                        }
                    }
                },
                scales: {
                    scaleOverride: true,
                    yAxes: [
                        {
                            scaleLabel: {
                                display: true,
                                labelString: chartTypeAndLabelConfig.yAxis.title,
                                fontSize: 20,
                                fontColor: "#1c969c"
                            },
                            display: true,
                            gridLines: {
                                display: true,
                                borderDash: [4, 2]
                            },
                            ticks: {
                                beginAtZero: true
                            }
                        }
                    ],
                    xAxes: [
                        {
                            scaleLabel: {
                                display: true,
                                labelString: chartTypeAndLabelConfig.xAxis.title,
                                fontSize: 20,
                                fontColor: "#1c969c"
                            },
                            gridLines: {
                                display: false
                            }
                        }
                    ]
                }
            }
        };
  

  var chart = new Chart(ctx, chartConfig);
  

返回的配置存储在变量“chartConfig”中，然后按如下方式创建图表：

  case "bar":
  case "bubble":
  case "line":
      return {
          type: value,
          data: {
              labels: labels,
              datasets: [
                  {
                      data: data,
                      fill: false,
                      backgroundColor: colorCodes.chartBackGroundColor,
                      borderWidth: 1,
                      borderColor: colorCodes.chartGraphBorderColor,
                      hoverBorderWidth: 2
                  }
              ]
          },
          options: {
              title: {
                  display: false
              },
              legend: {
                  display: false
              },
              layout: {
                  padding: 20
              },
              responsive: true,
              maintainAspectRatio: false,
              hover: {
                  animationDuration: 0
              },
              tooltips: {
                  enabled: false
              },
              animation: {
                  "duration": 1,
                  "onComplete": function () {
                      if (data.length > 0) {
                          var chartInstance = this.chart,
                              ctx = chartInstance.ctx;
                          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize,
                              Chart.defaults.global.defaultFontStyle,
                              Chart.defaults.global.defaultFontFamily);
                          ctx.textAlign = 'center';
                          ctx.textBaseline = 'bottom';
                          this.data.datasets.forEach(function (dataset, i) {
                              var meta = chartInstance.controller.getDatasetMeta(i);
                              meta.data.forEach(function (bar, index) {
                                  var data = data[index];
                                  ctx.fillText(data, bar._model.x, bar._model.y);
                              });
                          });
                      }
                  }
              },
              scales: {
                  scaleOverride: true,
                  yAxes: [
                      {
                          scaleLabel: {
                              display: true,
                              labelString: chartTypeAndLabelConfig.yAxis.title,
                              fontSize: 20,
                              fontColor: "#1c969c"
                          },
                          display: true,
                          gridLines: {
                              display: true,
                              borderDash: [4, 2]
                          },
                          ticks: {
                              beginAtZero: true
                          }
                      }
                  ],
                  xAxes: [
                      {
                          scaleLabel: {
                              display: true,
                              labelString: chartTypeAndLabelConfig.xAxis.title,
                              fontSize: 20,
                              fontColor: "#1c969c"
                          },
                          gridLines: {
                              display: false
                          }
                      }
                  ]
              }
          }
      };

var chart = new Chart(ctx, chartConfig);

当下拉列表从条到线或从线到条更改时，图表被渲染，当我尝试选择气泡时，我看到在图表中没有任何气泡的情况下，针对x轴和y轴绘制相同的值

例如：

data = [1,2,3,4,5];
labels = [a,b,c,d,e];

当选择bubble的下拉选项时，图表呈现为：

在动态呈现图表时，我还将销毁以前呈现的图表，然后根据我获得的新配置呈现图表。

---

这里有什么我遗漏的吗？

我认为问题在于您需要将数据转换为气泡图支持的格式。对于线条图和条形图，数据可以是整数或浮点数，但对于气泡图，它们需要是具有指定“x”、“y”和“r”（半径）值的对象

例如，要在半径为10的点（1,4）处的气泡图中显示数据，将其指定为：
{x:1，y:4，r:10}

一种方法是在创建气泡图或将数据副本存储为仅用于气泡图的对象之前调用helper函数。这实际上取决于你如何设置你的项目，以及你是否关心所进行的计算的数量。希望这有帮助

---

感谢编辑《关于错误和打字错误的问题》的James Z所做的努力。这很有效。问题是发送到气泡图的数据格式。达米恩-我对同一问题还有另一个问题。假设我不销毁初始的图表对象，但获取图表对象，然后执行->

var chartComponent=this.chart；chartComponent.type=“气泡”；chartComponent.update（）在这里，我将更新条形图到气泡图的类型。在不修改数据的情况下，气泡图将被渲染。任何线索，为什么这工作，而不是当配置只是数据在普通数组的数字不会？啊，我没有考虑，它有可能，查特JS本身支持数据转换从简单的数据阵列到泡泡对象，基本上为你做的工作！这也是一种更简洁的方法。我现在面临的问题是，我有一个下拉列表，其中有图表类型和数据选项，所以对我来说，当下拉列表更改为不同的图表类型时，总的来说是一个新数据，我需要执行格式化数据、添加动画和设置所有这些事情的比例。我想我需要一种方法将数据设置为只有一维数组的x、y和r格式的气泡，并在刻度值处设置标签。这可能是因为索引在某个点的值为零？您可以确保不会发生这种情况，或者尝试指定
suggestedMin
或
min
ticks选项。