Chart.js堆叠条形的定制工具提示，用于表示每个堆叠数据

问题描述

我正在尝试实现自定义的Chart.js工具提示，并被堆积在每个工具栏上的工具栏上显示相同数据的工具栏所卡住。每个堆叠栏的每个工具提示都需要不同的数据。

Screenshot

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

任何对正确方向的帮助或指导将不胜感激。在此先感谢！

Key

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",backgroundColor: "#dddddd",data: [12,13,18,15,20]
    },{
      label: "Night hours",backgroundColor: "#f8f8f8",]

};


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();
};

解决方法

您可以使用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",backgroundColor: "#dddddd",data: [12,13,18,15,20]
    },{
      label: "Night hours",backgroundColor: "#f8f8f8",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,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>

javascript stacked-chart