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

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

我已经试过怎么做了

下面是我的代码：

<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>

$（'page3a'）.live（'pageshow'，function（）{
变量s1=[1,2,3,4,5]；
var s2=[“消息1”、“消息2”、“消息3”、“消息4”、“消息5”]；
变量lineGraph1=$.jqplot（'lineGraph1'，[s1，s2]{
动画：对，
序列默认值：{
showMarker:false，
点标签：{show:true}
},
网格：{
抽边线：假，
drawGridlines:false，
背景：“#eafaff”，
影子：错
},
axesDefaults：{
秀:假,，
showTicks:false，
显示标记：错误
},
荧光灯：{
秀：没错，
大小：8，
工具提示位置：“n”，
工具提示：“拼贴”，
格式字符串：“%s”，
fadeTooltip：没错，
工具提示FadeSpeed：“快速”，
useAxesFormatters:false
}
});
});

任何帮助都将不胜感激。：）

如果您总是希望文本“Message”位于点值之前，则只需将其添加到formatString中：

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

如果s2变量与要显示的记号相对应，也可以使用该变量：

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

$（'page3a'）.live（'pageshow'，function（）{
变量s1=[[1,1]，[2,2]，[3,3]，[4,4]，[5,5]；
变量s2=[“消息1”]、[“消息2”]、[“消息3”]、[“消息4”]、[“消息5”]；
变量lineGraph1=$.jqplot（'lineGraph1'，[s1，s2]{
序列默认值：{
showMarker:false，
点标签：{show:true}
},
网格：{
抽边线：假，
drawGridlines:false，
背景：“#eafaff”，
影子：错
},
轴线：{
xaxis:{ticks:s2}
},
荧光灯：{
秀：没错，
大小：8，
工具提示位置：“n”，
工具提示：“x”，
格式字符串：“%s”，
}
});
});

像这样的东西（改编自）怎么样

当鼠标经过数据点时，将绘制一个小的工具提示，形式为

消息X，（X\u值，y\u值）

。然后，您可以进一步设置工具提示的样式以适应需要

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

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

---

我对尼克的答案做了一些修改。 但是我现在已经达到了预期的效果，只是粘贴代码以帮助将来的其他人

<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>

$（'#page3a'）.live（'pageshow'，function（）{
变量s1=[1,2,3,4,5]；
var s2=[“消息1”、“消息2”、“消息3”、“消息4”、“消息5”]；
变量lineGraph1=$.jqplot（'lineGraph1'，[s1，s2]{
动画：对，
序列默认值：{
showMarker:false，
点标签：{show:true}
},
网格：{
抽边线：假，
drawGridlines:false，
背景：“#eafaff”，
影子：错
},
axesDefaults：{
秀:假,，
showTicks:false，
显示标记：错误
}
});
$（'#lineGraph1'）.bind（'jqplotDataMouseOver'，函数（ev、SerieIndex、pointIndex、data）{
var mouseX=ev.mouseX；//这就是jquery知道将作为工具提示的div放在哪里的方式
var mouseY=ev.mouseY；
$（'#chartpseudotooltip'）.html（s2[pointIndex]）；
var cssObj={
'位置'：'绝对'，
“字体大小”：“粗体”，
'left'：mouseX+'px'，//此处通常需要更多偏移量
“顶部”：鼠标+“px”，
“背景色”：“白色”，
“z索引”：“1”
};
$（“#图表伪工具提示”）.css（cssObj）；
});
$（'#lineGraph1'）.bind（'jqplotDataUnhighlight'，函数（ev）{
$（'#chartpseudotooltip'）.html（''；
});
});

要调用此脚本，请将以下内容添加到我的content div中

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

---

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

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,
}

荧光灯：{
tooltipContentEditor:函数（str、serieIndex、pointIndex）{
返回str+“
其他数据”；
},
//其他选项只是为了完整性
秀：没错，
showTooltip:true，
工具提示：正确，
大小：10，
格式字符串：“%s”，
工具提示位置：“n”，
useAxesFormatters:false，
}

你可以在这里找到答案

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]；
变量plot1=$.jqplot（'linegraph1'，[line1，line2]{
系列默认值：{
线宽：1，
标记选项：{
show:true，//是否显示数据点标记。
样式：'圆角圆'，//圆，菱形，正方形，圆角圆。
尺寸：2//标记的尺寸（直径、边缘长度等）。
}},
轴线：{
xaxis：{
渲染器：$.jqplot.DateAxisRenderer，
选择：{
formatString:“%b%#d”，
显示网格线：false
}
},
yaxis:{min:0，numberTicks:25，
选择：{
s
<div id="lineGraph1" style="margin-top: 20px; margin-left: 160px; width: 350px; height: 350px">
        <div id="chartpseudotooltip"></div>

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,
}

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'
    }
  });