Chart.js：显示自定义工具提示，在堆叠条形图上始终可见

Question

在我的 MVC 项目中，我使用 Chart.js (v2.8.0) 构建一个包含 3 个数据集的堆叠条形图。

我需要为每个数据集显示自定义工具提示，这些提示始终在条形内可见。（参见下图。）我很难理解如何实现始终可见的自定义工具提示。

这是我当前的图表 js 代码：

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelArray,
        datasets: [{
            label: 'Green %',
            data: greenData,
            backgroundColor: 'rgb(0,166,149)',
            borderColor: 'rgb(0,166,149)',
            borderWidth: 1,
        },
        {
            label: 'Orange %',
            data: orangeData,
            backgroundColor: 'rgb(229,117,31)',
            borderColor: 'rgb(229,117,31)',
            borderWidth: 1,
        },
        {
            label: 'Grey %',
            data: greyData,
            backgroundColor: 'rgb(179,179,179)',
            borderColor: 'rgb(179,179,179)',
            borderWidth: 1,
        }]
    },
    options: {
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

请，如果有人可以帮助我在与栏相关的正确位置获得一些始终可见的自定义工具提示，那么我可以对其进行适当的样式设置。

Answer 1

假设您指的是条形图中的百分比值，这些值称为标签，而不是工具提示（当您将鼠标悬停在元素上时出现的内容）。

Chart.js 本身不提供标签功能，但可以通过datalabels 插件添加。您需要通过script标签包含该插件。（在加载 Chart.js 的脚本标记之后！）

条形图示例已经非常接近您想要的结果，但我已将其与下面代码片段中的代码合并以帮助您。

您可以参考插件格式化文档来定制最终结果。

var labelArray = ["James", "Mark", "Simon"],
  greenData = [55, 82, 32],
  orangeData = [27, 10, 53],
  greyData = [18, 8, 15];

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labelArray,
    datasets: [{
        label: 'Green %',
        data: greenData,
        backgroundColor: 'rgb(0,166,149)',
        borderColor: 'rgb(0,166,149)',
        borderWidth: 1
      },
      {
        label: 'Orange %',
        data: orangeData,
        backgroundColor: 'rgb(229,117,31)',
        borderColor: 'rgb(229,117,31)',
        borderWidth: 1,
      },
      {
        label: 'Grey %',
        data: greyData,
        backgroundColor: 'rgb(179,179,179)',
        borderColor: 'rgb(179,179,179)',
        borderWidth: 1,
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true
      }]
    },
    plugins: {
      datalabels: {
        color: 'white',
        font: {
          weight: 'bold'
        },
        formatter: function(value, context) {
          return Math.round(value) + '%';
        }
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<canvas id="myChart"></canvas>