Chart.js（自定义堆叠条的工具提示以表示每个堆叠数据）答案

【问题标题】：Chart.js (Customising tool tips of a stacked bar to represent each stacked data)Chart.js（自定义堆叠条的工具提示以表示每个堆叠数据）
【发布时间】：2020-10-22 22:45:57
【问题描述】：

我正在尝试实现一个自定义的 Chart.js 工具提示，并且被堆叠的条形图卡住了，这些条形图在每个堆叠条的工具提示上显示相同的数据。我需要为每个堆叠条的每个工具提示提供不同的数据。

在下面的图表中，例如对于第 2 天，栏中的堆栈均显示 34 的平均值。无论如何它们可以在同一个栏中，但与我正在使用的自定义工具提示具有不同的值？比如一个说34个，另一个说43个

我们将不胜感激任何正确方向的帮助或指导。提前致谢！！

https://jsfiddle.net/sabSK/xt5k7gac/2/

var dataBars = {
  labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"],
  datasets: [{
      label: "Morning hours",
      fill: true,
      backgroundColor: "#dedede",
      data: [09, 11, 14, 17, 19]
    },
    {
      label: "Evening hours",
      fill: true,
      backgroundColor: "#dddddd",
      data: [12, 13, 18, 15, 20]
    },
    {
      label: "Night hours",
      fill: true,
      backgroundColor: "#f8f8f8",
      data: [09, 11, 14, 17, 19]
    },
  ]

};


var dataJason = {
  "meth": [{
      "avg": 3,
      "sum": 33
    },
    {
      "avg": 34,
      "sum": 76
    },
    {
      "avg": 73,
      "sum": 56
    },
    {
      "avg": 9,
      "sum": 43
    },
    {
      "avg": 11,
      "sum": 12
    }
  ]
};

var avgDATA = [];
var sumDATA = [];

function techData() {
  var jdata = dataJason.meth;
  var jl = jdata.length;
  for (var i = 0; i < jl; i++) {
    avgDATA.push(dataJason.meth[i].avg);
    sumDATA.push(dataJason.meth[i].sum);
  }
}

function init() {
  techData();

  var bar = document.getElementById("bar").getContext('2d');
  var barChar = new Chart(bar, {
    type: 'bar',
    data: dataBars,
    options: {
      tooltips: {
        callbacks: {
          beforeLabel: function(tooltipItem, data) {
            var dataset = data.datasets[tooltipItem.datasetIndex];
            return data.datasets[tooltipItem.datasetIndex].label + ' : ' + dataset.data[tooltipItem.index] + "%";
          },
          label: function(tooltipItem, data) {
            var avg = "Avg: " + avgDATA[tooltipItem.index];
            return avg;
          },
          afterLabel: function(tooltipItem, data) {
            var sum = "Sum: " + sumDATA[tooltipItem.index];
            return sum;
          }
        }
      },
      scales: {
        xAxes: [{
          stacked: true,
          beginAtZero: true

        }],
        yAxes: [{
          stacked: true

        }]
      }

    }


  });
}

window.onload = function() {
  init();
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Chart</title>

</head>

<canvas id="bar" width="400" height="350"></canvas>

【问题讨论】：

标签： javascript chart.js stacked-chart

【解决方案1】：

您可以使用label 和footer tooltip callbacks 并从它们中的每一个返回string array，如下所示：

options: {
  tooltips: {
    callbacks: {       
      label: (tooltipItem, data) => data.datasets.map(ds => ds.label + ": " + ds.data[tooltipItem.index] + "%"),
      footer: tooltipItem => [
          "Avg: " + avgDATA[tooltipItem[0].index],
          "Sum: " + sumDATA[tooltipItem[0].index]              
        ]
    }
  },
  ...

请查看您修改后的代码，看看它是如何工作的：

var dataBars = {
  labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"],
  datasets: [{
      label: "Morning hours",
      fill: true,
      backgroundColor: "#dedede",
      data: [9, 11, 14, 17, 19]
    },
    {
      label: "Evening hours",
      fill: true,
      backgroundColor: "#dddddd",
      data: [12, 13, 18, 15, 20]
    },
    {
      label: "Night hours",
      fill: true,
      backgroundColor: "#f8f8f8",
      data: [9, 11, 14, 17, 19]
    }
  ]
};

var dataJason = {
  "meth": [
    { "avg": 3, "sum": 33 },
    { "avg": 34, "sum": 76 },
    { "avg": 73, "sum": 56 },
    { "avg": 9, "sum": 43 },
    { "avg": 11, "sum": 12 }
  ]
};

var avgDATA = [];
var sumDATA = [];

function techData() {
  var jdata = dataJason.meth;
  var jl = jdata.length;
  for (var i = 0; i < jl; i++) {
    avgDATA.push(dataJason.meth[i].avg);
    sumDATA.push(dataJason.meth[i].sum);
  }
}

function init() {
  techData();
  var bar = document.getElementById("bar").getContext('2d');
  var barChar = new Chart(bar, {
    type: 'bar',
    data: dataBars,
    options: {
      tooltips: {
        callbacks: {       
          label: (tooltipItem, data) => data.datasets.map(ds => ds.label + ": " + ds.data[tooltipItem.index] + "%"),
          footer: tooltipItem => [
              "Avg: " + avgDATA[tooltipItem[0].index],
              "Sum: " + sumDATA[tooltipItem[0].index]              
            ]
        }
      },
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      }
    }
  });
}

init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="bar" height="120"></canvas>

【讨论】：

感谢您的回复.....这是一个很好的解决方案，但我如何才能在第 1 天看到的同一个栏中完成这项工作，悬停时的两个堆栈都给我平均 3和 Sum 33 是否可以在同一条柱上具有不同的值，例如顶部堆栈不同的 avg 和底部堆栈具有不同的值？