1

我尝试在 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; ");
});
#section-chart {
  width: 600px;
  height: 300px;
}
<link href="http://www.flotcharts.org/flot/examples/examples.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.9.0/jquery.flot.tooltip.min.js" integrity="sha512-oQJB9y5mlxC4Qp62hdJi/J1NzqiGlpprSfkxVNeosn23mVn5JA4Yn+6f26wWOWCDbV9CxgJzFfVv9DNLPmhxQg==" crossorigin="anonymous"></script>


<div id="section-chart" class="demo-placeholder"></div>

当悬停值时，工具提示显示“您的%x销售额为2 美元”而不是它应该显示 Your sales for Aug 06 was $2在这里我应该如何将 x 轴值作为工具提示传递给浮点图表？我在这方面做错了什么。友善的建议 ？

4

2 回答 2

5

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

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

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

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

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

于 2013-08-12T14:45:24.940 回答
0

解决方案是使用带有回调函数的tooltipOpts -> 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 }
}
于 2017-11-23T12:46:35.487 回答