2

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

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. 在将鼠标悬停在不可见栏或它下方的任何栏上时，它现在将显示完整的统计数据，耶！

4

1 回答 1

0

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

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

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
});

ps hover 已弃用，请不要再使用它

于 2013-02-24T03:19:32.620 回答