Chart.js 3.7.1 我的插件该去哪里？

Question

我从 Chart.js 2.9.3 切换到 3.7.1，某些选项不再起作用。如果我没看错的话，“图例”和“工具提示”等选项会转到“选项”下的插件吗？

但这对我不起作用。我想隐藏图例并自定义工具提示。

插件去哪里了？任何帮助都会很棒。

谢谢你， 迈克尔

const titleTooltip_diagramm_fokus = (tooltipItems) => {return "Betroffen";};
    const labelTooltip_diagramm_fokus = (tooltipItems) => {return "Tooltip";};
    
    const data_diagramm_fokus = {
      datasets: [{
                label: ["Positive Value"],
                backgroundColor: "rgba(255,0,0,0.2)",
                borderColor: "#000",
                data: [{
                x: 10,
                y: 9,
                r: 10
                }]
                },{
                label: ["Negative Value"],
                backgroundColor: "rgba(255,0,0,0.2)",
                borderColor: "#000",
                data: [{
                x: -5,
                y: -5,
                r: 5
                }]
                },{
                label: ["Beteiligte / Rollen 3"],
                backgroundColor: "rgba(255,0,0,0.2)",
                borderColor: "#000",
                data: [{
                x: -10,
                y: -9,
                r: 6
                }]
                },
      ]};

const options_diagramm_fokus = {
    responsive: true,
    maintainAspectRatio: true,
    title: {
        display: false,
        text: "Identifiziere die größten fokus"
      },
      scales: {
        yAxes: [{
        ticks: {
                                beginAtZero: false,
                                max: 10,
                                min: -10
                            },
          scaleLabel: {
            display: true,
            labelString: "schwacher Einfluss / starker Einfluss"
          }
        }],
        xAxes: [{
        ticks: {
                                beginAtZero: false,
                                max: 10,
                                min: -10
                            },
          scaleLabel: {
            display: true,
            labelString: "starke Unterstützung / starker Zweifel"
          }
        }]
      },
      plugins:{   
             legend: {
               display: false
                     },

            tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                var rLabel = (data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r - 2);
                    var label = data.datasets[tooltipItem.datasetIndex].label || "";

                    if (label) {
                        label += ": ";
                    }
                    label += "(" + tooltipItem.xLabel + " / ";
                    label += tooltipItem.yLabel + ") | ";
                    label += "Betroffenheit: " + rLabel;
                    return label;
                }
            }
        }
    }
  };
  
const plugin_diagramm_fokus = {
id: "plugin_diagramm_fokus",
  beforeDraw(chart, args, options) {
    const {ctx, chartArea: {left, top, right, bottom}, scales: {x, y}} = chart;
    const midX = x.getPixelForValue(0);
    const midY = y.getPixelForValue(0);
    ctx.save();
    ctx.fillStyle = options.topLeft;
    ctx.fillRect(left, top, midX - left, midY - top);
    ctx.fillStyle = options.topRight;
    ctx.fillRect(midX, top, right - midX, midY - top);
    ctx.fillStyle = options.bottomRight;
    ctx.fillRect(midX, midY, right - midX, bottom - midY);
    ctx.fillStyle = options.bottomLeft;
    ctx.fillRect(left, midY, midX - left, bottom - midY);
    ctx.restore();
  }
      }; 
    
        const config_diagramm_fokus =   {
        type: "bubble",
        data: data_diagramm_fokus,
        options: {
        options_diagramm_fokus,
      plugins: {
      plugin_diagramm_fokus: {
        topLeft: "#9DC3E6",
        topRight: "#2E75B6",
        bottomRight: "#BDD7EE",
        bottomLeft: "#DEEBF7",
      }
    }
    },
      plugins: [plugin_diagramm_fokus]
    };
    
    
        const diagramm_fokus = new Chart(
        document.getElementById("diagramm_fokus").getContext("2d"),
        config_diagramm_fokus,
        );

<h2>
Hello!
</h2>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="diagramm_fokus"></canvas>

Answer 1

这是因为您的选项完全错误，选项中没有选项对象和插件对象。选项对象是一个包含所有选项的对象。因此，如果您有自定义插件，您还需要在那里定义它。你的配置的其余部分仍然是错误的，有很多 V2 语法，如标题和缩放配置。对于所有更改，请阅读迁移指南

const titleTooltip_diagramm_fokus = (tooltipItems) => {
  return "Betroffen";
};
const labelTooltip_diagramm_fokus = (tooltipItems) => {
  return "Tooltip";
};

const data_diagramm_fokus = {
  datasets: [{
    label: ["Positive Value"],
    backgroundColor: "rgba(255,0,0,0.2)",
    borderColor: "#000",
    data: [{
      x: 10,
      y: 9,
      r: 10
    }]
  }, {
    label: ["Negative Value"],
    backgroundColor: "rgba(255,0,0,0.2)",
    borderColor: "#000",
    data: [{
      x: -5,
      y: -5,
      r: 5
    }]
  }, {
    label: ["Beteiligte / Rollen 3"],
    backgroundColor: "rgba(255,0,0,0.2)",
    borderColor: "#000",
    data: [{
      x: -10,
      y: -9,
      r: 6
    }]
  }, ]
};

const options_diagramm_fokus = {
  responsive: true,
  maintainAspectRatio: true,
  title: {
    display: false,
    text: "Identifiziere die größten fokus"
  },
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: false,
        max: 10,
        min: -10
      },
      scaleLabel: {
        display: true,
        labelString: "schwacher Einfluss / starker Einfluss"
      }
    }],
    xAxes: [{
      ticks: {
        beginAtZero: false,
        max: 10,
        min: -10
      },
      scaleLabel: {
        display: true,
        labelString: "starke Unterstützung / starker Zweifel"
      }
    }]
  },
  plugins: {
    legend: {
      display: false
    },
    plugin_diagramm_fokus: {
      topLeft: "#9DC3E6",
      topRight: "#2E75B6",
      bottomRight: "#BDD7EE",
      bottomLeft: "#DEEBF7",
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var rLabel = (data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r - 2);
          var label = data.datasets[tooltipItem.datasetIndex].label || "";

          if (label) {
            label += ": ";
          }
          label += "(" + tooltipItem.xLabel + " / ";
          label += tooltipItem.yLabel + ") | ";
          label += "Betroffenheit: " + rLabel;
          return label;
        }
      }
    }
  }
};

const plugin_diagramm_fokus = {
  id: "plugin_diagramm_fokus",
  beforeDraw(chart, args, options) {
    const {
      ctx,
      chartArea: {
        left,
        top,
        right,
        bottom
      },
      scales: {
        x,
        y
      }
    } = chart;
    const midX = x.getPixelForValue(0);
    const midY = y.getPixelForValue(0);
    ctx.save();
    ctx.fillStyle = options.topLeft;
    ctx.fillRect(left, top, midX - left, midY - top);
    ctx.fillStyle = options.topRight;
    ctx.fillRect(midX, top, right - midX, midY - top);
    ctx.fillStyle = options.bottomRight;
    ctx.fillRect(midX, midY, right - midX, bottom - midY);
    ctx.fillStyle = options.bottomLeft;
    ctx.fillRect(left, midY, midX - left, bottom - midY);
    ctx.restore();
  }
};

const config_diagramm_fokus = {
  type: "bubble",
  data: data_diagramm_fokus,
  options: options_diagramm_fokus,
  plugins: [plugin_diagramm_fokus]
};


const diagramm_fokus = new Chart(
  document.getElementById("diagramm_fokus").getContext("2d"),
  config_diagramm_fokus,
);

<h2>
  Hello!
</h2>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="diagramm_fokus"></canvas>