javascript - c3 检测悬停在栏上

Question

当用户将鼠标悬停在 .c3-bar 上时，我希望有工具提示并做一些自定义的事情。这既不受 c3 api 支持，也因为 c3 管理指针事件的方式(通过使用 css 将其关闭)而变得困难。如果我将 .c3-bar 转换为 pointer-events:auto !important 工具提示停止工作，否则我无法收听 .c3-bar 上的事件。有谁知道如何解决这个问题？

我让它工作了，但是它很丑很丑

const c3Hover = 'c3-hover'
const barSelector = '.c3-bar'
const $wrapper = $('#' + this.chart.id)
const getBarRects = () =>
  _.map($wrapper.find(barSelector),
  (bar) => bar.getBoundingClientRect())

$wrapper.on('mousemove', ({clientX,clientY}) =>
  _.reduce(getBarRects(), (acc, {left,right,top,bottom}) =>
    acc  || left <= clientX && clientX <= right
         && top  <= clientY && clientY <= bottom
  , false) ? $wrapper.addClass(c3Hover)
           : $wrapper.removeClass(c3Hover))

Answer 1

有一种内置的方法可以在事件悬停在数据点上时报告事件，但它似乎在每个系列超过特定 x 值时触发一次 - 即在具有 2 个系列的条形图上它将触发两次。不知道这对你的情况是否足够好？

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'bar',
        onmouseover: function (d) {
            console.log ("yo", d);
        },
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
    }
});

输出:

yo Object {x: 0, value: 30, id: "data1", index: 0, name: "data1"}
yo Object {x: 0, value: 130, id: "data2", index: 0, name: "data2"}

当移过第一对条形图时(不管它实际上是在哪个特定条形图上)

http://c3js.org/reference.html#data-onmouseover

编辑:啊，我看到它也会在你不在实际酒吧上方但也在一般附近时触发。我想这不符合您的要求。