如何使用 Chart.JS 在不同的 div 上呈现工具提示文本答案

【问题标题】：How to render tooltip text on a different div with Chart.JS如何使用 Chart.JS 在不同的 div 上呈现工具提示文本
【发布时间】：2018-12-28 22:11:44
【问题描述】：

我正在使用 Chart.js 使用条形图显示一些数据。我的问题是是否有一种方法可以提取工具提示的文本并将其显示在不同的 div 上，所以每当我悬停条形图时，我都会得到标签，并且值会悬停在页面的另一个位置。

我设法使用 alert(label) 函数提醒标签或值。但是当我使用 $('#mydiv').text(label) 函数时，它不起作用。这是我的代码：

<canvas id="widgetChart4"></canvas>
<id id="myDiv"></id>


<script>
var ctx = document.getElementById( "widgetChart4" );
ctx.height=50;
ctx.width=250;
var myChart = new Chart( ctx, {
    type: 'bar',
    data: 
    {
    labels: [ "January", "February", "March", "April", "May", "June", 
       "July" ],
    datasets: [
            {
                label: false,
                data: [ 16, 32, 18, 26, 42, 33, 44 ]
             }
              ]
    },
    options: 
    {
        responsive: true,
        tooltips: 
        {
           callbacks: 
         {
           label: function(tooltipItem, data) {
           //this is working
           alert( data['datasets'][0]['data'][tooltipItem['index']]);
           //this is not working
           $("#myDiv").text(data['datasets'][0]['data'] 
           [tooltipItem['index']]);
           return data['datasets'][0]['data'][tooltipItem['index']];
           },
         }
        }

    }
    });
</script>

【问题讨论】：

标签： chart.js

【解决方案1】：

我设法使用 alert(label) 提醒标签或值功能。但是当我使用 $('#mydiv').text(label) 函数时，它确实不工作。

我运行了您的代码，它运行良好，所以可能原因之一是它不能在您这边运行，您没有在代码中导入 jQuery。

var ctx = document.getElementById("widgetChart4");
ctx.height = 50;
ctx.width = 250;
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June",
      "July"
    ],
    datasets: [{
      label: false,
      data: [16, 32, 18, 26, 42, 33, 44]
    }]
  },
  options: {
    responsive: true,
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          $('#myDiv').html(data['datasets'][0]['data']
            [tooltipItem['index']]);
          return data['datasets'][0]['data'][tooltipItem['index']];
        },
      }
    }

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="widgetChart4"></canvas>
<div id="myDiv"></div>

【讨论】：