ChartJS - 悬停时显示百分比（AngularJS）

Question

我在 angularjs 中有简单的图表，悬停时我会显示 (%)。

HTML

<div ng-app="chartDemo" ng-controller="MainController as mainCtrl">
      <canvas id="doughnut" class="chart chart-doughnut"
        chart-data="mainCtrl.data" chart-labels="mainCtrl.labels" chart-options="mainCtrl.options">
      </canvas>
</div>

JS

angular.module('chartDemo', ['chart.js'])
    .config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
      //animation: false,
      //responsive: false
    });
  }])
    .controller('MainController', MainController);

function MainController($scope, $timeout) {
  var vm = this;
  
  vm.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  vm.data = [300, 500, 100];
  vm.options = {
    legend: {
      display: true,
      position: 'bottom'
    },
    cutoutPercentage: 60,
    tooltipEvents: [],
    tooltipCaretSize: 0,
    showTooltips: true,
    onAnimationComplete: function() {
      self.showTooltip(self.segments, true);
    }
  }
  
}

MainController.$inject = ['$scope', '$timeout'];

我试过在他们的文档网站上到处查看，但没有看到任何相关内容。

对我的工作有什么建议吗？

小提琴

https://jsfiddle.net/bheng/3pw5oLyh/

Answer 1

您可以在选项的 label 部分使用 tooltips 回调。

  vm.options = {
    legend: {
      display: true,
      position: 'bottom'
    },
    tooltips: {
        callbacks: {
        label: (ttItem,data) => (`${data.labels[ttItem.index]}: ${data.datasets[ttItem.datasetIndex].data[ttItem.index]}%`)
      }
    },
    cutoutPercentage: 60,
    tooltipEvents: [],
    tooltipCaretSize: 0,
    showTooltips: true,
    onAnimationComplete: function() {
      self.showTooltip(self.segments, true);
    }
  }

更新小提琴示例：https://jsfiddle.net/Leelenaleee/9ghu8efs/5/

Answer 2

您可以使用 tooltip callback 将数据修改为实际百分比和工具提示值。特别是xtabs(expression ~ name + id, data = transform(subset(do.call(rbind, Map(cbind, id = sample_ID, mget(sample_ID))), type == 'mRNA')[c('id', 'name', 'expression')], expression = as.numeric(expression))) 。