Блог

У меня есть диаграмма пончиков с 2 наборами данных с пользовательским обратным вызовом всплывающей подсказки. Я пытаюсь скрыть всплывающую подсказку для одного из наборов данных. У меня все это работает, но я получаю кучу ошибок js при наведении указателя мыши на второй набор данных. Вот мой код:

     const data = {
        labels: ' . $custom_label . ',
        datasets: [
            {
                data: ' . $vdata . ', 
                backgroundColor: [ "#f56954", "#00a65a", "#f39c12", "#00c0ef", "#3c8dbc" ], 
                hoverOffset: 4
            },
            {
                data: ' . $cdata . ', 
                backgroundColor: [ "#fff", "#fff", "#fff", "#fff", "#fff" ], 
                hoverBackgroundColor: [ "#fff", "#fff", "#fff", "#fff", "#fff" ], 
                hoverBorderColor: [ "#fff", "#fff", "#fff", "#fff", "#fff" ],
            }
        ] 
    };
    const config = {
        type: "doughnut",
        data: data,
        options: {
            cutoutPercentage: 40,
            legend: {
                display: false
            },
            tooltips: { 
                filter: function (tooltipItem) {
                   return tooltipItem.datasetIndex === 0;
                },
                callbacks: {
                    title: function(tooltipItem, data) {
                            var dataset = data["datasets"][0];
                            var percent = Math.round((dataset["data"][tooltipItem[0]["index"]] / dataset["_meta"][0]["total"]) * 100)
                            return data["labels"][tooltipItem[0]["index"]]   " "   percent   "%";
                    },
                    label: function(tooltipItem, data) {
                            var dataset = data["datasets"][0];
                            var value = dataset["data"][tooltipItem["index"]];
                            return "$"   (Math.round(value * 100) / 100).toFixed(2);
                    },
                    afterLabel: function(tooltipItem, data) {
                            var dataset = data["datasets"][1];
                            return dataset["data"][tooltipItem["index"]]   " "   data["labels"][tooltipItem["index"]];
                    }
                },
                titleFontColor: "#fff",
                titleFontSize: 14,
                backgroundColor: "#000",
                bodyFontColor: "#fff",
                bodyFontSize: 14,
                bodySpacing: 4,
                displayColors: false
            }
        }
    };
    var assetsChart = new Chart( document.getElementById("assetsChart"), config );
 

Я предполагаю, что он получает ошибку при попытке прочитать часть [«индекс»], поскольку она не существует для второго набора данных.

ИЗМЕНИТЬ: я обновил, чтобы показать полный код для моей диаграммы

Как мне решить эту проблему?

Вы используете действительно старую версию Chart.js . Сначала вы должны переключиться на последнюю версию (в настоящее v3.5.1 время ).

Пожалуйста, взгляните на свой исправленный и выполняемый код ниже и посмотрите, как он может работать с помощью Chart.js v3.5.1 .

 new Chart('chart', {
  type: 'doughnut',
  data: {
    labels: ['One', 'Two', 'Three', 'Four', 'Five'],
    datasets: [{
        data: [5, 3, 7, 6, 7],
        backgroundColor: ["#f56954", "#00a65a", "#f39c12", "#00c0ef", "#3c8dbc"],
        hoverOffset: 4,
      },
      {
        data: [2, 4, 5, 4, 6],
        hidden: true
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        filter: ctx => ctx.datasetIndex == 0,
        callbacks: {
          title: ctx => {
            if (ctx.length) {
              var data = ctx[0].dataset.data;
              var value = data[ctx[0].dataIndex];
              var total = data.reduce((a, b) => a   b, 0);
              var percent = Math.round(value / total * 100);
              return value   " "   percent   "%";
            }
          },
          label: ctx => {
            var value = ctx.dataset.data[ctx.dataIndex];
            return "$"   (Math.round(value * 100) / 100).toFixed(2);
          },
          afterLabel: ctx => {
            var hiddenDataset = ctx.chart.config._config.data.datasets[1].data;
            var value = hiddenDataset[ctx.dataIndex];
            return value   " "   ctx.label;
          }
        },
        titleColor: "#fff",
        titleFontSize: 14,
        backgroundColor: "#000",
        bodyFontColor: "#fff",
        bodyFontSize: 14,
        bodySpacing: 4,
        displayColors: false
      }
    }
  }
}); 

 canvas {
  max-height: 200px;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>