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

编辑：Aah，我看到当你还没有超过实际的酒吧而且还在附近时，它也会被点燃。我想这不符合你的要求。

c3检测悬停在条形

1 个答案: