javascript - 条形图的 jQplot OHLC 渲染器鼠标悬停

Question

我刚刚使用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 } }],
});});

Answer 1

我使用 jqplot 荧光笔插件通过稍微修改过的代码版本来完成这项工作。这是 jsfiddle，代码如下。请注意，这与http://www.jqplot.com/tests/candlestick-charts.php上的示例非常相似。

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