javascript - 条形图上的jqplot工具提示




2 Answers

我通过jqplot.highlighter.js找到一个未记录的属性: tooltipContentEditor 。 我用它来自定义工具提示以显示x轴标签。

使用这样的东西:

highlighter:{
        show:true,
        tooltipContentEditor:tooltipContentEditor
    },

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    // display series_label, x-axis_tick, y-axis value
    return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}

我正在使用jquery插件jqplot绘制一些条形图。 在悬停时,我想在工具提示中显示栏的刻度及其值。 我试过了

highlighter: { show: true, 
            showTooltip: true,      // show a tooltip with data point values.
            tooltipLocation: 'nw',  // location of tooltip: n, ne, e, se, s, sw, w, nw.
            tooltipAxes: 'both',    // which axis values to display in the tooltip, x, y or both.
            lineWidthAdjust: 2.5   // pixels to add to the size line stroking the data point marker
            }

但它不起作用。 酒吧在视觉上变得更轻,顶部有一个小点(理想情况下会消失 - 可能来自折线图渲染器的东西),但在任何地方都没有工具提示。 谁知道我怎么做到这一点? 我会有很多条形,所以如果我只在那里显示它们,那么x轴会变得杂乱无章。




我在以下链接上使用了荧光笔插件的版本:

https://github.com/tryolabs/jqplot-highlighter

我正在使用的参数:

highlighter: {
    show:true,
    tooltipLocation: 'n',
    tooltipAxes: 'pieref', // exclusive to this version
    tooltipAxisX: 20, // exclusive to this version
    tooltipAxisY: 20, // exclusive to this version
    useAxesFormatters: false,
    formatString:'%s, %P',
}

新参数确保了工具提示出现的固定位置。 我更喜欢将它放在左上角,以避免调整容器div的大小。




Related

javascript jquery graph charts jqplot