Question

我正在做一个项目。客户要求我做一个任务。悬停Morrisjs甜甜圈图时。我想显示一个工具提示。 MorrisJS具有条形图和折线图的工具提示，并且具有悬停回调方法。但是，甜甜圈图没有。我在网上冲浪。我有一个解决方案，但是当调整窗口大小时。工具提示现在可以使用了。请帮我做。提前致谢。

<div id="morrischart" style="height: 250px; width: 250px; float: left">
</div>
<div id="morrisdetails-item" class="morris-hover morris-default-style" style="position:static; float: left;">
  <div class="morris-hover-point">this is a test</div>
</div>


var chart = new Morris.Donut({
  data: [{
    label: 'complete',
    value: 50
  }, {
    label: 'late',
    value: 20
  }, {
    label: 'delayed',
    value: 30
  }],
  colors: [
    '#00A33D',
    '#C31929',
    '#FFA536'
  ],
  element: 'morrischart',
});
for (i = 0; i < chart.segments.length; i++) {
                                                  chart.segments[i].handlers['hover'].push(function (el) {
              console.log(chart.segments[i]);                                            $(el).attr("cursor", "pointer");
});
}

推荐： http://jsfiddle.net/ag25xj32/1/

如何在morrisJS图表的甜甜圈图中添加hoverCallback？

0 个答案: