Question

我尝试使用Flot char中的以下代码绘制图表。图表是按预期绘制的，但不是工具提示

$(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轴值作为工具提示传递给flot图表？我在这方面做错了什么。善意的建议？

Answer 1

解决问题的最简单方法是使用回调替换content字符串：

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

我定义getTooltip以获得您想要的输出：

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

正如您在updated jsFiddle中所看到的那样，它可以正常工作，但您可能需要在评论中考虑船长的建议，并了解您的情况最佳。

Answer 2

解决方案是使用 tooltipOpts - ＆gt;带有回调函数的 content 方法，可以将动态数据正确地返回到标签。

我发现将第四个参数传递给“tooltipOpts”的回调函数实际上会为您提供构建图表/图形的整个数据对象。从这里开始，您可以使用与要提取的标签索引相同的函数的第二个参数轻松提取X轴标签。

实施例

数据对象我正在传递给绘图函数：

[
    {
        data: [[1,47478],[2,24500],[3,40177],[4,10512],[5,10512],[6,10512],[7,43439]],
        points: { show: true, radius: 3},
        splines: { show: true, tension: 0.45, lineWidth: 0, fill: 0.4}
    }
],
{
    colors: ['#0cc2aa'],
    series: { shadowSize: 3 },
    xaxis: {
        show: true,
        font: { color: '#ccc' },
        position: 'bottom',
        ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']],
    },
    yaxis:{ show: true, font: { color: '#ccc' }, min:1},
    grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
    tooltip: true,
    tooltipOpts: {
        content: function(data, x, y, dataObject) {
            var XdataIndex = dataObject.dataIndex;
            var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
            return y + ' impressions for all of your posts on ' + XdataLabel;
        },
        defaultTheme: false,
        shifts: { x: 0, y: -40 }
    }
}

从上述数据对象呈现的图表：

正如您在图像预览中看到的那样，用于动态呈现标签内容的逻辑形成了实际数据：

tooltipOpts: {
    content: function(data, x, y, dataObject) {
        var XdataIndex = dataObject.dataIndex;
        var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
        return y + ' impressions for all of your posts on ' + XdataLabel;
    },
    defaultTheme: false,
    shifts: { x: 0, y: -40 }
}

如何在flot图表文本数据中将x轴值设置为工具提示

2 个答案: