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

2024-05-19 • 问答

在我的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,borderWidth: 1,},{
            label: 'Orange %',data: orangeData,backgroundColor: 'rgb(229,117,31)',borderColor: 'rgb(229,{
            label: 'Grey %',data: greyData,backgroundColor: 'rgb(179,179,179)',borderColor: 'rgb(179,}]
    },options: {
        scales: {
            xAxes: [{
                stacked: true,}],yAxes: [{
                stacked: true
            }]
        }
    }
});

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

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

Label.js本身不具有标签功能，但可以通过datalabels plugin添加。您需要通过script标签包含插件。（脚本脚本标记将在其中加载Chart.js！）

bar chart sample已经非常接近您想要的结果，但是我已将其与下面的代码段中的代码合并以帮助您。

您可以引用插件formatting documentation来定制最终结果。

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,borderWidth: 1
      },{
        label: 'Orange %',data: orangeData,backgroundColor: 'rgb(229,117,31)',borderColor: 'rgb(229,borderWidth: 1,},{
        label: 'Grey %',data: greyData,backgroundColor: 'rgb(179,179,179)',borderColor: 'rgb(179,}
    ]
  },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>

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

zhangkaiaijuan 回答：Chart.js：显示自定义工具提示，在堆叠的条形图中始终可见

大家都在问