如何在任何东西上呈现Chart.js 2.x工具提示

我正在使用Chart.js 2.6.0我一直在研究一个示例来呈现自定义图形。您可以在https://jsfiddle.net/arminzia/bm4ezdur/处看到现场演示。如何在任何东西上呈现Chart.js 2.x工具提示

基本上，我在每个栏的顶部渲染圆来表示值。这里是代码：

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    responsive: true, 
    maintainAspectRatio: false, 
    data: { 
     labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"], 
     datasets: [{ 
      data: [16, 87, 56, 35, 88, 60, 12], 
      backgroundColor: "#4082c4" 
     }] 
    }, 
    options: { 
      "hover": { 
      "animationDuration": 0 
     }, 
     "animation": { 
      "duration": 1, 
         "onComplete": function() { 
          var chartInstance = this.chart, 
           ctx = chartInstance.ctx; 

          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); 
          ctx.textAlign = 'center'; 
          ctx.textBaseline = 'bottom'; 

          this.data.datasets.forEach(function (dataset, i) { 
           var meta = chartInstance.controller.getDatasetMeta(i); 
           meta.data.forEach(function (bar, index) { 
            var data = dataset.data[index] + '$';        

        var centerX = bar._model.x; 
        var centerY = bar._model.y - 10; 
        var radius = 22; 

        ctx.beginPath(); 
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
        ctx.fillStyle = 'white'; 
        ctx.fill(); 
        ctx.lineWidth = 1; 
        ctx.strokeStyle = '#4082c4'; 
        ctx.stroke(); 

        ctx.fillStyle = '#4082c4'; 
        ctx.font = "bold 14px Calibri"; 
        ctx.fillText(data, bar._model.x, bar._model.y); 
           }); 
          }); 
         } 
     }, 
      legend: { 
      "display": false 
     }, 
     tooltips: { 
      "enabled": true 
     }, 
     scales: { 
      yAxes: [{ 
        display: true, 
        gridLines: { 
        display : true 
       }, 
       ticks: { 
         display: true, 
        beginAtZero:true, 
        max: 140 
       } 
      }], 
      xAxes: [{ 
        barThickness: 40, 
        gridLines: { 
        display : false 
       }, 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
});

现在的问题是，工具提示被隐藏在这些圈子下。我一直在苦苦挣扎太久，并没有找到任何解决方案或从文档中的任何有用的东西。

如何强制在这些圆圈之上呈现工具提示？实际上，一切如z-index：1000。

来源

2017-07-31 Nexus

问题似乎是，当启用工具提示时，每次将鼠标悬停在画布上时，都会再次触发动画功能。我通过向动画'onComplete'添加一个警报来测试它。使用'tooltips：{enabled：true}'，每次悬停都会触发警报。当我将其更改为'tooltips：false'时，警报只触发一次。 –

@TozZ正确。但如果我禁用工具提示，则不显示任何内容。我需要在点击/触摸事件上显示工具提示，不需要悬停。但同样，它们应该在我的画布效果图上呈现。 – Nexus

忘记更新此帖子。答案是使用外部（自定义）工具提示。这基本上是渲染HTML元素来创建工具提示。阅读文档here。

来源

2017-09-08 18:52:02 Nexus

如何在任何东西上呈现Chart.js 2.x工具提示

回答

相关问题