Chartjs中每个数据点的工具提示

qij5mzcb  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(215)

这是我在每个数据点上放置不同工具提示的代码。我想在每个数据点上放置不同的月份,但是所有的月份都打印在一起。我该如何将它们分开呢?

function trendsChart(labels1, datasets1, chartId) {
  var ctx =
    document.getElementById(chartId).getContext('2d');
  var MONTHS = ["January", "February", "March", "April", "May", "June"];
  console.log(datasets1)
  var data = {
    labels: labels1,
    datasets: datasets1,
  };

  // Tooltip
  const titleTooltip = (tooltipItems) => {
    let sum = 77;
    MONTHS.forEach(function(tooltipItem) {
      sum = tooltipItem;
    })
    return sum;
  }

  var randomScalingFactor = function() {
    return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 100);
  };

  var line1 = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];

  myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
      maintainAspectRatio: false,
      responsive: true,
      scales: {
        x: {
          barPercentage: 1.6,
          gridLines: {
            drawBorder: false,
            color: 'rgba(225,78,202,0.1)',
            zeroLineColor: "transparent",
          },
          ticks: {
            padding: 0,
            fontColor: "#9a9a9a"
          },
          title: {
            display: true,
            text: 'Week Of'
          }
        },
        y: {
          barPercentage: 1.6,
          gridLines: {
            drawBorder: false,
            color: 'rgba(225,78,202,0.1)',
            zeroLineColor: "transparent",
          },
          ticks: {
            padding: 0,
            fontColor: "#9a9a9a"
          },
          stacked: false,
          title: {
            display: true,
            text: 'Count'
          }
        }
      },
      plugins: {
        tooltip: {
          //yAlign: 'bottom',
          callbacks: {
            title: titleTooltip,
          }
        }
      }
    }

  });

  return myChart;

}

a1o7rhls

a1o7rhls1#

在粘贴代码的titleTooltip中,您用MONTHS中的最后一个条目替换sum。然而,图片中的工具提示建议,在真实的代码中,您用77MONTHS中的所有条目创建一个数组,然后可能返回'Sum: ' + sum,这将导致工具提示中显示的字符串。
为了在单独的一行中查看所有月份,您可以按如下所示更改代码,并将sum作为array返回:

const titleTooltip = ctx => {
  let sum = ['Sum: 77'];
  MONTHS.forEach(month => {
    sum.push(month);
  });    
  return sum;
}

生成的工具提示仍然没有多大意义,但您会在不同的行上看到所有月份。因此,您需要扩展函数titleTooltip以获得所需的结果。
请看一下你修改过的代码,看看它是如何工作的。
第一个

相关问题