javascript - 如何在 Chart.JS 2.0 上使用 tooltipTemplate

Question

我正在尝试将圆环图与多个数据集一起使用，并使用 tooltipTemplate 功能来自定义工具提示内的文本，但没有任何效果。这在以前的 Chart js 版本中有效，但不支持多个数据集。任何人都可以帮忙吗？下面是我的代码:

options: {
    tooltips: {
        tooltipTemplate: "<%if (label){%><%=value%><%} else {%> No data <%}%>",
    },
}

Answer 1

正如potatopeelings 在评论中提到的，您必须为工具提示设置回调。

这是一个例子:

options: {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
        var label = data.labels[tooltipItem.index];
        return datasetLabel + ': ' + label;
      }
    }
  }
}

现场演示

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Men", "Women", "Unknown"],
        datasets: [{
            label: 'Sweden',
            data: [60, 40, 20],
            backgroundColor: ['rgba(158, 216, 202, 0.75)', 'rgba(255, 150, 162, 0.75)', 'rgba(160, 160, 160, 0.75)']
        }, {
            label: 'Netherlands',
            data: [40, 70, 10],
            backgroundColor: ['rgba(158, 216, 202, 0.5)', 'rgba(255, 150, 162, 0.5)', 'rgba(160, 160, 160, 0.5)']
        }, {
            data: [33, 33, 34],
            backgroundColor: ['rgba(158, 216, 202, 0.25)', 'rgba(255, 150, 162, 0.25)', 'rgba(160, 160, 160, 0.25)']
        }]
    },
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
                    var label = data.labels[tooltipItem.index];
                    return datasetLabel + ': ' + label;
                }
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>