使用Chart.js检测图表部分上的悬停事件

Question

我使用Chart.js制作了一个饼图,我想检测一个片段何时悬停.我已经找到了大量关于操作悬停在段上时出现的工具提示的文档,但没有关于在出现工具提示时做其他事情的事情.这可能吗？

Answer 1

我知道这已经得到了一个公认的答案,我不确定这是否满足你的用例,但Chart js发布了一个允许自定义工具提示的更新(可能是一个月前左右).这允许在通常绘制工具提示时运行自定义函数.他们在git hub的示例部分有一个例子

总之,您定义了一个自定义函数

 Chart.defaults.global.customTooltips = function(tooltip){//do what you want}

这是他们在示例中给出的示例,并在html工具提示中添加了一些额外的文本.我看到的唯一令人讨厌的事情是,不提供触发此工具提示的段/点/栏,这将非常方便,因为您可以在知道此信息的图表上做一些事情但是您会得到工具提示数据,这意味着您可以用它做点什么.

Chart.defaults.global.customTooltips = function (tooltip) {
      // Tooltip Element
      var tooltipEl = $('#chartjs-tooltip');
      // Hide if no tooltip
      if (!tooltip) {
          tooltipEl.css({
              opacity: 0
          });
          return;
      }
      // Set caret Position
      tooltipEl.removeClass('above below');
      tooltipEl.addClass(tooltip.yAlign);
      // Set Text
      tooltipEl.html(tooltip.text+ " anythign custom you want");
      // Find Y Location on page
      var top;
      if (tooltip.yAlign == 'above') {
          top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
      } else {
          top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
      }
      // Display, position, and set styles for font
      tooltipEl.css({
          opacity: 1,
          left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
          top: tooltip.chart.canvas.offsetTop + top + 'px',
          fontFamily: tooltip.fontFamily,
          fontSize: tooltip.fontSize,
          fontStyle: tooltip.fontStyle,
      });
  };
  var pieData = [{
      value: 300,
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: "Red"
  }, {
      value: 50,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Green"
  }, {
      value: 100,
      color: "#FDB45C",
      highlight: "#FFC870",
      label: "Yellow"
  }, {
      value: 40,
      color: "#949FB1",
      highlight: "#A8B3C5",
      label: "Grey"
  }, {
      value: 120,
      color: "#4D5360",
      highlight: "#616774",
      label: "Dark Grey"
  }];

  var ctx1 = document.getElementById("chart-area1").getContext("2d");
  window.myPie = new Chart(ctx1).Pie(pieData);
  var ctx2 = document.getElementById("chart-area2").getContext("2d");
  window.myPie = new Chart(ctx2).Pie(pieData);

#canvas-holder {
       width: 100%;
       margin-top: 50px;
       text-align: center;
   }
   #chartjs-tooltip {
       opacity: 1;
       position: absolute;
       background: rgba(0, 0, 0, .7);
       color: white;
       padding: 3px;
       border-radius: 3px;
       -webkit-transition: all .1s ease;
       transition: all .1s ease;
       pointer-events: none;
       -webkit-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
   }
   #chartjs-tooltip.below {
       -webkit-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
   }
   #chartjs-tooltip.below:before {
       border: solid;
       border-color: #111 transparent;
       border-color: rgba(0, 0, 0, .8) transparent;
       border-width: 0 8px 8px 8px;
       bottom: 1em;
       content:"";
       display: block;
       left: 50%;
       position: absolute;
       z-index: 99;
       -webkit-transform: translate(-50%, -100%);
       transform: translate(-50%, -100%);
   }
   #chartjs-tooltip.above {
       -webkit-transform: translate(-50%, -100%);
       transform: translate(-50%, -100%);
   }
   #chartjs-tooltip.above:before {
       border: solid;
       border-color: #111 transparent;
       border-color: rgba(0, 0, 0, .8) transparent;
       border-width: 8px 8px 0 8px;
       bottom: 1em;
       content:"";
       display: block;
       left: 50%;
       top: 100%;
       position: absolute;
       z-index: 99;
       -webkit-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
   }

<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas-holder">
    <canvas id="chart-area1" width="50" height="50" />
</div>
<div id="canvas-holder">
    <canvas id="chart-area2" width="300" height="300" />
</div>
<div id="chartjs-tooltip"></div>

Answer 2

没有...

ChartJS API中没有任何内容可以覆盖或扩展工具提示,

但是,一个解决方法......

您可以修改类的draw方法Chart.Tooltip.当ChartJS通常呈现工具提示时,这将允许您"做其他事情".

您想要绑定的绘制方法从源的第1351行开始:

https://github.com/nnnick/Chart.js/blob/master/src/Chart.Core.js

Answer 3

我的操作方式稍微简单一些：假设您已经有一些代码定义了like画布， canvas = document.getElementById("chart");而饼图为 window.myPie。您可以使用onmousemove javascript事件或jQuery悬停

canvas.onmousemove = function(evt) {
    var el = window.myPie.getElementsAtEvent(evt);
    //do something with the el object to display other information
    //elsewhere on the page
}

在我的情况下，请根据的值突出显示表格行 el[0]._index

Answer 4

对于v2.0版本:

Chart.defaults.global.hover.onHover = function(x) {
  if(x[0]) {
    var index = x[0]._index;
    // Place here your code
  }
};