jQplot OHLC Renderer mouseover для баров

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