JavaScript Chart.JS - 自定义工具提示以在悬停时添加特定数据点的描述

Question

我正在 Chart.JS 中创建一个图表，并希望查看者能够在圆环图的特定部分上 hover 并获取数据和数据的自定义描述。 对于下面的示例，我们通过 web 和一系列采访寻找相关研究项目。 现在，它显示了字段的名称和相应的数据。 除此之外，我想为用户定义字段。 例如，当有人将鼠标悬停在基于 Web 的搜索上时，我希望他们看到：

同样，我想添加定义采访字段的描述。 我之前添加了工具提示，但它总是类似于 [静态字符串] + [数据]。 我以前不必为每个数据点创建自定义定义。 任何帮助表示赞赏。 另请参阅我的 CodePen： https://codepen.io/tenebris_silentio/pen/abdgXqg

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Project Overview</title>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
    </head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
  </head>
  <div class="container">
   <div class="row my-3">
          <div class="col">
            <p class="sansserif">
              <h3>Project Overview</h3></p>
          </div>
      </div>

      <div class="row py-2">
          <div class="col-md-4 py-1">
              <div class="card" style="width: 33rem;">
                  <div class="card-body">
                      <canvas id="chDonut1"></canvas>
                  </div>
              </div>
          </div>

  <script>
  /* chart.js chart examples */
  Chart.pluginService.register({
  beforeDraw: function(chart) {
  var width = chart.chart.width,
  height = chart.chart.height,
  ctx = chart.chart.ctx;

  ctx.restore();
  var fontSize = (height / 124).toFixed(2);
  ctx.font = fontSize + "em sans-serif";
  ctx.textBaseline = "middle";

  var text = "";

  switch(chart.chart.canvas.id){
    case "chDonut1":
       text = "Method";
       break;
  }

  var textX = Math.round((width - ctx.measureText(text).width) / 2),
  textY = height / 2;

  ctx.fillText(text, textX, textY);
  ctx.save();
  }
  });
  // chart colors
  var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];

  var donutOptions = {
  cutoutPercentage: 85,
  legend: {position:'bottom', padding:5, labels: {pointStyle:'circle', usePointStyle:true}}
  };

  // donut 1
  var chDonutData1 = {
  labels: ['Web-based search', 'Interviews'],
  datasets: [
    {
      backgroundColor: colors.slice(0,2),
      borderWidth: 0,
      data: [75, 25]
    }
  ]
  };

  var chDonut1 = document.getElementById("chDonut1");
  if (chDonut1) {
  new Chart(chDonut1, {
    type: 'pie',
    data: chDonutData1,
    options: donutOptions
  });
  }



  </script>

Answer 1

您可以定义一组工具提示回调函数来获得所需的结果。 这可能如下所示：

tooltips: {
  callbacks: {
    title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
    label: (tooltipItems, data) => 'Count: ' + data.datasets[0].data[tooltipItems.index],
    footer: (tooltipItems, data) => ['', 'Infos:'].concat(data.datasets[0].info[tooltipItems[0].index])
  }
}

请注意，在footer回调中，我返回在data object 中定义的名为info的数组中定义的文本。

datasets: [{
  ...
  info: [
    ['This is the description', 'for Web-based search ...'],
    ['This is the description', 'for Interviews ...']
  ]
}]

请在下面查看您修改后的代码：

 <html lang="en"> <head> <meta charset="UTF-8"> <title>Project Overview</title> <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" /> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script> <.-- Load plotly:js into the DOM --> <script src='https.//cdn.plot.ly/plotly-latest.min:js'></script> </head> <div class="container"> <div class="row my-3"> <div class="col"> <p class="sansserif"> <h3>Project Overview</h3> </p> </div> </div> <div class="row py-2"> <div class="col-md-4 py-1"> <div class="card" style="width; 33rem."> <div class="card-body"> <canvas id="chDonut1"></canvas> </div> </div> </div> <script> /* chart.js chart examples */ Chart.pluginService:register({ beforeDraw. function(chart) { var width = chart.chart,width. height = chart.chart,height. ctx = chart.chart;ctx. ctx;restore(). var fontSize = (height / 124);toFixed(2). ctx;font = fontSize + "em sans-serif". ctx;textBaseline = "middle"; var text = "". switch (chart.chart.canvas:id) { case "chDonut1"; text = "Method"; break. } var textX = Math.round((width - ctx.measureText(text),width) / 2); textY = height / 2. ctx,fillText(text, textX; textY). ctx;save(); } }), // chart colors var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545'; '#6c757d']: var donutOptions = { cutoutPercentage, 85: legend: { position, 'bottom': padding, 5: labels: { pointStyle, 'circle': usePointStyle, true } }: tooltips: { callbacks: { title, (tooltipItems. data) => data.labels[tooltipItems[0],index]: label, (tooltipItems: data) => 'Count. ' + data.datasets[0].data[tooltipItems,index]: footer, (tooltipItems, data) => ['': 'Infos.'].concat(data.datasets[0].info[tooltipItems[0];index]) } } }: // donut 1 var chDonutData1 = { labels, ['Web-based search', 'Interviews']: datasets: [{ backgroundColor. colors,slice(0, 2): borderWidth, 0: data, [75, 25]: info, [ ['This is the description'. 'for Web-based search..,'], ['This is the description'. 'for Interviews..;'] ] }] }. var chDonut1 = document;getElementById("chDonut1"), if (chDonut1) { new Chart(chDonut1: { type, 'pie': data, chDonutData1: options; donutOptions }); } </script> </html>

JavaScript Chart.JS - 自定义工具提示以在悬停时添加特定数据点的描述

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-07-31 14:22:27

JavaScript Chart.JS - 自定义工具提示以在悬停时添加特定数据点的描述

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-07-31 14:22:27

解决方案1
1 已采纳 2020-07-31 14:22:27