Question

我正在尝试实现自定义的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",
      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();
};

Answer 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>

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

1 个答案: