Question

我正在使用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>

Answer 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>

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

1 个答案: