热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在特定数据标签上的chart.js中隐藏工具提示?

如何解决《如何在特定数据标签上的chart.js中隐藏工具提示?》经验,为你挑选了1个好方法。

我试图在click.js中隐藏工具提示,只要点击对象的名称是"Something".我已经尝试过了:

  this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
  type: 'doughnut',
  data: {
    datasets: [{
      label: _.map(this.dataService.AmTimeSlots, 'ProjectName'),
      data: _.map(this.dataService.AmTimeSlots, 'Duration'),
      backgroundColor: _.map(this.dataService.AmTimeSlots, 'Color'),
      hoverBackgroundColor: _.map(this.dataService.AmTimeSlots, 'HoverColor'),
      borderColor: _.map(this.dataService.AmTimeSlots, 'BorderColor'),
      borderWidth: 1.5
    },
    {
      label: _.map(this.dataService.PmTimeSlots, 'ProjectName'),
      data: _.map(this.dataService.PmTimeSlots, 'Duration'),
      backgroundColor: _.map(this.dataService.PmTimeSlots, 'Color'),
      hoverBackgroundColor: _.map(this.dataService.PmTimeSlots, 'HoverColor'),
      borderColor: _.map(this.dataService.PmTimeSlots, 'BorderColor'),
      borderWidth: 1.5
    }],
  },
  options: {
    elements: {
      arc: {
        roundedCornersFor: 0
      }
    },
    segmentShowStroke: false,
    responsive: true,
    maintainAspectRatio: true,
    legend: {
      display: false
    },
    onClick: this.chartClick.bind(this),
    cutoutPercentage: 65,
    tooltips: {
      filter: function (tooltipItem) {
        if (tooltipItem.xLabel == "Free Slot") {
          return false;
        } else {
          return true;
        }
      },
      callbacks: {
        label: function (tooltipItems, data) {
        return data.datasets[tooltipItems.datasetIndex].label[tooltipItems.index];
        },
        afterLabel: function (tooltipItems, data) {               
        return Math.floor(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] / 6) + 'h ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] * 10 % 60 + 'm';          
        }
      }
    }
  },
  config: {
    data: this.dataService,
    settings: this.settingsService
  }
});

上面的代码工作正常,它成功地隐藏了工具提示的文本,但问题是黑色标签/边框仍然存在.如何隐藏它?



1> beaver..:

您只需过滤工具提示即可:

options: {
    tooltips: {
       filter: function (tooltipItem, data) {
           var label = data.labels[tooltipItem.index];
           if (label == "Red") {
             return false;
           } else {
             return true;
           }
       }
    }
}

看到这个jsfiddle:https://jsfiddle.net/beaver71/ndc2uao2/


推荐阅读
author-avatar
as2520_526
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有