Javascript jQplot OHLC渲染器用于酒吧的鼠标盖

我刚刚使用jQplot插件实现了一个图表。我使用了OHLCRenderer作为渲染器，图表如下所示

你能告诉我如何在这些条上添加鼠标悬停选项，这样我可以在鼠标悬停在每个条上时显示一些信息吗。谢谢

这是密码

var catOHLC = [
    [1, 10, 6.5, 10, 10],
[2, 1.2, 5, 1.2, 1.2],
[3, 8, 10, 8, 8],
];

var catOHLC1 = [
    [1, 0, 5, 0, 0]

];

var ticks = ['A', 'B', 'C', 'D', 'E'];
var ticks2 = [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
plot4 = $.jqplot('chart4', [catOHLC, catOHLC1], {
    stackSeries: true,
  axes: {
      xaxis: {
          renderer:$.jqplot.CategoryAxisRenderer,
          ticks:ticks
      },
      yaxis: {
          tickRenderer: $.jqplot.CanvasAxisTickRenderer,
          ticks: ticks2,
          max: 24,
          min: 0
      }
  },
  series: [{ renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: false, tickLength: 0, lineWidth: 10 } },
  { renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: false, tickLength: 0, lineWidth: 10 } }],
});});

---

我使用了jqplot highlighter插件，通过稍微修改代码的版本来实现这一点，代码如下。请注意，这与上的示例非常相似

plot4=$.jqplot（'chart4'，[catOHLC，catOHLC1]{
系列：[{
渲染器：$.jqplot.OHLCRenderer，
渲染器选项：{
长度：4，
线宽：10
}
}, {
渲染器：$.jqplot.OHLCRenderer，
渲染器选项：{
长度：4，
线宽：10
}
}],
荧光灯：{
秀：没错，
showMarker:false，
工具提示：“xy”，
Y值：4，
formatString:'\
x:%s\
打开：%s\
您好：%s\
低：%s\
关闭：%s'
}
});

否。它不工作。我在问题中添加了代码。你能检查一下吗？重写答案，请现在再试。干得好！！谢谢这对我有点帮助。但是为什么JSFIDLE中没有显示日期、打开、高、低和关闭？如果您想自定义工具提示，需要使用formatString。占位符%s将逐个替换为每个y值。为了做到这一点，我已经更新了答案和jsfiddle，所以这是显而易见的。

plot4 = $.jqplot('chart4', [catOHLC, catOHLC1], {

    series: [{
        renderer: $.jqplot.OHLCRenderer,
        rendererOptions: {
            tickLength: 4,
            lineWidth: 10
        }
    }, {
        renderer: $.jqplot.OHLCRenderer,
        rendererOptions: {
            tickLength: 4,
            lineWidth: 10
        }
    }],

    highlighter: {
        show: true,
        showMarker: false,
        tooltipAxes: 'xy',
        yvalues: 4,
        formatString: '<table class="jqplot-highlighter"> \
  <tr><td>x:</td><td>%s</td></tr> \
  <tr><td>open:</td><td>%s</td></tr> \
  <tr><td>hi:</td><td>%s</td></tr> \
  <tr><td>low:</td><td>%s</td></tr> \
  <tr><td>close:</td><td>%s</td></tr></table>'
    }
});