Chart.js 3.7.1 куда обращаться с моими плагинами?

Я перешел с 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>

plugins chart.js tooltip legend

17.03.2022 12:38

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Привет ЛиЛенали, спасибо! Я знаю старый синтаксис V2. Но поскольку я боролся на первом этапе, я хотел бы спросить. Еще раз спасибо, это мне очень помогает.

— 18.03.2022 13:49

17.03.2022 12:57