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插件，使這項工作與您的代碼稍加修改的版本。 Here is the 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>' 
    } 
});