更改jqPlots工具提示显示的内容

时间:2012-10-01 11:27:46

标签: jquery jqplot

有没有办法在jqPlot图的每个点更改文本。因此,不是每个点显示其正常值,而是可以将其更改为其他值。我的图表上的每个点代表不同的数据。例如,我想显示按月分类测试的学生数量。但是,而不是工具提示说我希望它显示平均测试结果。

是否可以更改工具提示文字?

由于

2 个答案:

答案 0 :(得分:1)

首先,这不是您问题的确切解决方案,但它可以作为一种可能的解决方案。

我使用pointLabels plugin在jqplot上取得了类似的结果。

这是你可以做的,

pointLabels插件显示用于绘制图表的数据数组的内容。但是可以选择使用数据数组的哪个索引来显示点标签。

pointLabels: {
    show: true,
    seriesLabelIndex: 2
}

因此,您可以做的是对于数据数组中的每个点,您可以包含要在图表中显示的任何细节。

但请注意,此不会显示为工具提示,而是作为点标签。

我创建了一个小例子让你理解这一点。

http://jsfiddle.net/GayashanNA/q9mH8/

我还创建了一篇博客文章,描述了我在项目中所做的工作,如果您认为此解决方案可以为您提供帮助,请在此处阅读以获取更多信息。

http://gayashan-a.blogspot.de/2012/10/tracking-mouse-position-on-your_2.html

答案 1 :(得分:0)

我找到了你问的确切问题的解决方案。实际上有一种显示自定义工具提示的方法,但在任何地方都没有很好的记录。

这是你如何做到的。首先,您必须包含highlighter plugin。然后在绘图选项中设置类似于此的荧光笔选项。

highlighter: {
    show: true,
    tooltipContentEditor: tooltipContentEditor
}

此处tooltipContentEditor是一个外部函数,可用于输出自定义HTML作为工具提示。

然后您可以从此函数返回计算的平均值或其他所需值。

function tooltipContentEditor(str, series_index, point_index, plot) {
    len = plot.data[series_index].length;
    total = 0;
    for (i = 0 ; i < len; i++) {
        total += parseFloat(plot.data[series_index][i][1]);
    }
    return "average:"+total/len;
}

您可以使用随函数传递的参数访问所有数据。

查看我的jsFiddle here