如何在浮点图文本数据中将x轴值设置为工具提示 [英] How to set x axis value as tooltip in flot charts textual data

问题描述

我尝试在Flot char中使用以下代码绘制图表.图表正在按预期方式绘制，但不是工具提示

I tried with following code in Flot char to draw a chart. Chart is plotting as expected but not tooltip

$(function() {

        var data = [["Aug 06",2],["Aug 07",1],["Aug 08",1.5],["Aug 09",0],["Aug 10",0],["Aug 11",0],["Aug 12",0]];
    var options = {

      series: {
        lines: { show: true,
          lineWidth: 1,
          fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
        },
        points: { show: true, 
          lineWidth: 2 
        },
        shadowSize: 0
      },
      grid: { hoverable: true, 
        clickable: true, 
        tickColor: "#eeeeee",
        borderWidth: 0,
        hoverable : true,
        clickable : true
      },
      tooltip : true,
      tooltipOpts : {
        content : "Your sales for <b>%x</b> was <span>$%y</span>",
        defaultTheme : false
      },
      xaxis: {
            mode: "categories",
            tickLength: 0 
        },
        yaxis: {
                  min: 0
                } ,
      selection: {
        mode: "x"
      }
    };
        $.plot("#section-chart", [ data ], options);

        // Add the Flot version string to the footer

        $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});

将鼠标悬停在值上时，工具提示会显示您的％x 的销售额为$ 2"，而应该显示Your sales for Aug 06 was $2在这里，我应该如何将x轴值作为工具提示传递到浮点图中? 我对此做错了.好心的建议吗?

When hover the values, tooltip shows "Your sales for %x was $2" instead it should shows Your sales for Aug 06 was $2 Here how should i pass x axis values as tooltip in flot chart? What i have done wrong on this. kindly advice ?

推荐答案

解决问题的最简单方法是将content字符串替换为回调:

The easiest way to solve your problem is to replace the content string with a callback:

tooltipOpts : {
        content : getTooltip,
        defaultTheme : false
      },

我定义了getTooltip以获得所需的输出:

I defined getTooltip to get your desired output:

function getTooltip(label, x, y) {
    return "Your sales for " + x + " was $" + y; 
}

它可以正常工作，正如您在更新了jsFiddle 中看到的那样，但是您可能需要考虑船长的建议，在评论中，看看最适合您的情况.

It works, as you can see in the updated jsFiddle, but you may want to consider the advice of captain, in comments, and see what's best in your case.

这篇关于如何在浮点图文本数据中将x轴值设置为工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！