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

问题描述 投票:0回答:1

在我的MVC项目中,我正在使用chart.js(v2.8.0)构建具有3个数据集的堆叠条形图。

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

Desired End Result

这是我当前图表的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
            }]
        }
    }
});

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

javascript asp.net-mvc chart.js
1个回答
0
投票

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

Label.js本身没有标签功能,但可以通过datalabels plugin添加。

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/[email protected]/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart"></canvas>
© www.soinside.com 2019 - 2024. All rights reserved.