javascript - 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 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,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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89eae1e8fbfda7e3fac9bba7b1a7b9" rel="noreferrer noopener nofollow">[email protected]</a>/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42212a23303628316f322e37252b2c6f262336232e2320272e3102726c756c72" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<canvas id="myChart"></canvas>