javascript - 条形太短，不再可见

Question

所以我有这个带有 jqplot 的图表

如果您足够仔细地观察，您会发现在 4 和 5 下方确实有要显示的数据，但条形太短，无法显示数字标签。我有悬停文本，但该栏也太小，鼠标无法注册。在 3 以下实际上在红色和绿色之间还有另一个条，但它也太小而无法显示。

遇到这种情况怎么办？有什么建议么？

我有几个想法，但不知道如何实现:

• 仅当条形图比最高的条形图小一定百分比时，才在每个条形图的下一个/顶部显示数字标签。

• 当鼠标位于给定列中时显示悬停文本，而不仅仅是在栏本身上。此悬停文本将显示所有 3 种颜色的数据，而不仅仅是一种。

谢谢!

编辑:

我通过编写自定义荧光笔类让悬停文本显示所有 3 种颜色

highlighter: {
show: true,
...
tooltipContentEditor:tooltipContentEditor,
}
...
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    var data1 = plot.data[2][pointIndex];
    var data2 = plot.data[1][pointIndex];
    var data3 = plot.data[0][pointIndex];
    var value = data1 + "-" + data2 + "-" + data3;
    return value;
}

当然这只适用于每个条形总是有 3 种颜色的情况，对我有用，所以我现在正在使用。现在我需要弄清楚如何在栏太小时更轻松地显示荧光笔。

编辑 2:

我想出了如何让打火机显示出来。

1. 创建一个虚拟系列，我将其设置为给定列与最高列之间的差异

2. 将颜色更改为 rgb 透明，移除阴影、移除高光和其他任何内容。

3. 将鼠标悬停在不可见栏或其下方的任何栏上时，现在会显示完整的统计数据，耶!

Answer 1

不可见的数据系列听起来很老套，更不用说现在用户将鼠标放在这个空间时会得到不一致的反馈，这将是一个可变实体

这听起来是使用图例的好时机，然后将处理程序放在图例的项目上，触发相关系列的悬停

var $l = $('.jqplot-table-legend');
$l.on('mouseenter', function(e){
var $this = $(this),
    i = $this.index(),
    l = $l.length;
    // now call your custom highlight function or trigger the hover using relevant indices
})
.on('mouseleave', function(e){ 
    // hide visible tooltips
});

附注hover 已弃用，请不要再使用它