JQPlot 折线图上的自定义工具提示答案

【问题标题】：Custom Tooltip on JQPlot Line ChartJQPlot 折线图上的自定义工具提示
【发布时间】：2013-02-12 15:51:36
【问题描述】：

我正在尝试获取折线图的自定义工具提示，因为我希望工具提示更详细地描述点而不是该点的值。（附上的图片进一步解释了我在做什么）

我已经尝试过如何做到这一点。

下面是我的代码：

<script type="text/javascript">        $('#page3a').live('pageshow', function () {
        var s1 = [1, 2, 3, 4, 5];
        var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"];

        var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], {

            animate: true,
            seriesDefault: {
                showMarker: false,
                pointLabels: { show: true }
            },

            grid: {
                drawBorder: false,
                drawGridlines: false,
                background: '#eafaff',
                shadow: false
            },
            axesDefaults: {
                show: false,

                showTicks: false,
                showTickMarks: false

            },

            highlighter: {
                show: true,
                sizeAdjust: 8,
                tooltipLocation: 'n',
                tooltipAxes: 'piered',
               formatString:'%s',
                fadeTooltip: true,
                tooltipFadeSpeed: "fast",
                useAxesFormatters: false

            }

        });
    });</script>

任何帮助将不胜感激。 :)

【问题讨论】：

标签： jquery tooltip jqplot jqplot-highlighter

【解决方案1】：

有一个配置选项允许您提供一个自定义回调方法，该方法被调用来检索工具提示内容：

highlighter: {
    tooltipContentEditor: function (str, seriesIndex, pointIndex) {
        return str + "<br/> additional data";
    },

    // other options just for completeness
    show: true,
    showTooltip: true,
    tooltipFade: true,
    sizeAdjust: 10,
    formatString: '%s',
    tooltipLocation: 'n',
    useAxesFormatters: false,
}

【讨论】：

【解决方案2】：

我对 nick_w 的回答稍作修改。不过我现在已经达到了想要的效果，只是把代码贴出来，以后帮助别人。

<script type="text/javascript">     

   $('#page3a').live('pageshow', function () {
          var s1 = [1, 2, 3, 4, 5];
          var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"];

          var lineGraph1 = $.jqplot('lineGraph1', [s1, s2], {

              animate: true,
              seriesDefault: {
                  showMarker: false,
                  pointLabels: { show: true }
              },

              grid: {
                  drawBorder: false,
                  drawGridlines: false,
                  background: '#eafaff',
                  shadow: false
              },
              axesDefaults: {
                  show: false,

                  showTicks: false,
                  showTickMarks: false

              }
          });

          $('#lineGraph1').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) {

              var mouseX = ev.mouseX; //these are going to be how jquery knows where to put the div that will be our tooltip
              var mouseY = ev.mouseY;
              $('#chartpseudotooltip').html(s2[pointIndex] );
              var cssObj = {
                  'position': 'absolute',
                  'font-weight': 'bold',
                  'left': mouseX + 'px', //usually needs more offset here
                  'top': mouseY + 'px',
                  'background-color': 'white',
                  'z-index':'1'
              };
              $('#chartpseudotooltip').css(cssObj);

          });

          $('#lineGraph1').bind('jqplotDataUnhighlight', function (ev) {
              $('#chartpseudotooltip').html('');
          });
      });</script>

为了调用这个脚本，将以下内容添加到我的内容 div 中。

<div id="lineGraph1" style="margin-top: 20px; margin-left: 160px; width: 350px; height: 350px">
        <div id="chartpseudotooltip"></div>

【讨论】：

【解决方案3】：

如果您总是希望在点值之前出现文本“消息”，您只需在 formatString 中添加它：

highlighter:{
  show: true,
  formatString: 'Message %s',
  //other stuff like sizeAdjust...
}

如果您的 s2 变量对应于您要显示的刻度，您也可以使用它：

axes: {
   yaxis: {
       ticks: s2,
       tickRenderer: ...
   }
}

【讨论】：

您好安东尼，感谢您的留言。我认为我没有正确解释问题。我正在尝试使用 jQplot 创建折线图，我正在使用 s1 来生成折线图，但我正在尝试使用 s2 数据而不是工具提示上的 s1 来显示。例如，如果我将鼠标悬停在第一个工具提示上，它会给我对该点的更有意义的描述。这就是为什么我尝试使用 s2 来做到这一点。
我知道使用 pieRenderer 您可以传递诸如 ["Information about data", 10] 这样的信息，然后我可以使用 pieRenderer 来使用 y 值进行绘图，但是当我将鼠标悬停在上面时，荧光笔只会显示X 值。我试图用折线图来做到这一点，但它不起作用。是否有一个特殊的线图渲染器可以做到这一点？
误会先见谅。您可以将 s2 显示为 xaxis（或 yaxis）的刻度，正如我所说的，感谢轴：{xaxis（或 yaxis）：{ticks：s2}}。然后在您的荧光笔选项中，您可以使用tooltipAxes: x（或y，如果您在yaxis上显示刻度）选项定义要在工具提示中显示的轴。 Jqplot highlighter documentation
我已经按照您的说法修改了我的代码，但图表不再绘图。以下是代码，我不确定我是否正确实施了您的解决方案。

【解决方案4】：

<script type="text/javascript">        $('#page3a').live('pageshow', function () {
        var s1 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]];
        var s2 = [["Message 1"], ["Message 2"], ["Message 3"], ["Message 4"], ["Message 5"]];

        var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], {


            seriesDefault: {
                showMarker: false,
                pointLabels: { show: true }
            },

            grid: {
                drawBorder: false,
                drawGridlines: false,
                background: '#eafaff',
                shadow: false
            },
            axes: {

                xaxis: {ticks: s2}


            },

                highlighter: {
                show: true,
                sizeAdjust: 8,
                tooltipLocation: 'n',
                tooltipAxes: 'x',
                formatString: '%s',


            }

        });
    });</script>

【讨论】：

轴：{ xaxis：{renderer：$.jqplot.CategoryAxisRenderer，刻度：s2，tickRenderer：$.jqplot.CanvasAxisTickRenderer}}。确保加载 jqplot.canvasAxisTickRenderer.min.js。我不在家所以还没有测试。
Fiddle here。结果是 - 我认为 - 不完全是您想要的，因为总是显示工具提示。我一开始的想法（使用 s2 作为刻度）不起作用（也许会？）因为它是显示元素的索引

【解决方案5】：

这样的东西怎么样（改编自jqplot tooltip on bar chart）？

$('#lineGraph1').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) {

    var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip
    var mouseY = ev.pageY;
    $('#chartpseudotooltip').html(s2[pointIndex] + ', (' + data[0] +', ' + data[1] + ')');
    var cssObj = {
        'position' : 'absolute',
        'font-weight' : 'bold',
        'left' : mouseX + 'px', //usually needs more offset here
        'top' : mouseY + 'px',
        'background-color': 'white'
    };
    $('#chartpseudotooltip').css(cssObj);

});

$('#lineGraph1').bind('jqplotDataUnhighlight', function (ev) {
    $('#chartpseudotooltip').html('');
});

当鼠标经过数据点时，这将绘制一个Message X, (x_value, y_value) 形式的小工具提示。然后，您可以进一步设置工具提示的样式以适合。

在此示例中，工具提示如下：

 <div id="chartpseudotooltip"></div>

【讨论】：

我已尝试实现您的方法，但无法让工具提示正常工作。下面的 pastebin 有我试图实现的代码，这是你的意思吗？ pastebin.com/HrLrSDB4
您实际上并没有绑定事件 - 没有调用该代码。尝试将其移动到您在 live 处理程序中做的最后一件事，就在创建图表之后。
感谢您的解决方案，我对代码进行了细微的修改，但我得到了想要的解决方案。

【解决方案6】：

你可以在这里jsfiddle得到答案

var line1=[['10/17/2013',21],['1/30/2014',3],['11/1/2013',12],['10/2/2013',3],['11/5/2013',18]];

   var line2=[['10/17/2013',41],['1/30/2014',33],['11/1/2013',12],['10/2/2013',63],['11/5/2013',18]];

var plot1 = $.jqplot('linegraph1', [line1,line2],{
  seriesDefaults: {
    lineWidth: 1,
     markerOptions: {
        show: true,             // wether to show data point markers.
        style: 'filledCircle',  // circle, diamond, square, filledCircle.
        size: 2            // size (diameter, edge length, etc.) of the marker.
    }},
    axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,

          tickOptions:{
            formatString:'%b&nbsp;%#d',
        showGridline: false
          }
      },
      yaxis:{min:0,numberTicks:25,
        tickOptions:{

        showGridline: false
          }
      }
    },
    legend :
    {
        "show" : true,
        location: 'se'
    },
    series : [
        {
            label : "line1",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Blue: %s <br/>custom tooltip<span></div>"}

        },
        {
            label : "line2",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Orange: %s <br/>custom tooltip<span></div>"},

        }
    ],
   highlighter: {
      show: true,
       sizeAdjust: 25.5,
       tooltipLocation: 's'
    }
  });

【讨论】：