Question

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

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

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

当用户点击甜甜圈下方的其中一个按钮时，问题是触发此所需功能。例如。当用户点击“触发段”时，点击“＆＃39;按钮。工具提示应显示在段1上方（就像用户点击了段1一样）。

奖励可能是工具提示最初也会显示在第1段之上，但不是必需的。

任何帮助非常感谢：）

请注意

使用Chart.js v 2.5.0。我已经阅读了一些建议使用showTooltip（）方法的文章，例如： chart.showTooltip（[chart.segments [0]]，true）;不幸的是，此版本中不存在此方法。

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

Answer 1

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

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>

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

1 个答案: