Chart.js - 甜甜圈显示活动段工具提示（点击外部按钮）

debugcn 发表于 Dev

AJB

// ignore this comment - required to post the following jsfiddle.net link!

请参阅https://jsfiddle.net/68bf25vh/

如果单击甜甜圈段，则会显示相应的工具提示，这是正确的功能。

问题是当用户单击甜甜圈下方的按钮之一时会触发此所需的功能。例如，当用户单击“触发段 1 单击”按钮时。工具提示应显示在第 1 段上方（就像用户单击了第 1 段一样）。

一个额外的好处是工具提示最初也显示在第 1 段上方，但不是必需的。

非常感谢任何帮助:)

请注意

使用 Chart.js v 2.5.0。我读过一些建议使用 showTooltip() 方法的文章，例如 chart.showTooltip([chart.segments[0]], true); 不幸的是，此版本中不存在此方法。

找到了这个https://stackoverflow.com/a/37989832，但这会显示所有工具提示。只想显示活动（当前）段的工具提示。

ɢʀᴜɴᴛ

单击外部按钮时，您可以使用以下功能显示相应的工具提示：

function showTooltip(chart, index) {
   var segment = chart.getDatasetMeta(0).data[index];
   chart.tooltip._active = [segment];
   chart.tooltip.update();
   chart.draw();
}

调用该函数时，分别将 chart-instance 和 button-index 作为第一个和第二个参数传递。

奖金：

要最初显示 segment-1 的工具提示，请在图表选项中添加以下配置：

animation: {
   onComplete: function() {
      if (!isChartRendered) {
         showTooltip(myChart, 0);
         isChartRendered = true;
      }
   }
}

^{* 声明一个isChartRendered在全局范围内命名的变量并将其设置为false}

xᴀᴍᴘʟᴇ

var isChartRendered = false;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
   type: 'doughnut',
   data: {
      labels: ['Segment 1', 'Segment 2', 'Segment 3'],
      datasets: [{
         data: [10, 10, 10]
      }]
   },
   options: {
      events: ['click'],
      cutoutPercentage: 70,
      legend: {
         display: false
      },
      tooltips: {
         displayColors: false
      },
      onClick: function(evt, elements) {},
      // BONUS: show segment 1 tooltip initially
      animation: {
         onComplete: function() {
            if (!isChartRendered) {
               showTooltip(myChart, 0);
               isChartRendered = true;
            }
         }
      }
   }
});

$(document).on('click', 'button', function() {
   var $this = $(this),
       index = $this.index();
   showTooltip(myChart, index);
});

function showTooltip(chart, index) {
   var segment = chart.getDatasetMeta(0).data[index];
   chart.tooltip._active = [segment];
   chart.tooltip.update();
   chart.draw();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:400px;height:400px;">
   <canvas id="myChart"></canvas>
</div>

<div style="margin-top:50px;">
   <button>Trigger Segment 1 Click</button>
   <button>Trigger Segment 2 Click</button>
   <button>Trigger Segment 3 Click</button>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。