Я только что реализовал диаграмму с использованием 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, чтобы сделать эту работу со слегка измененной версией вашего кода. Вот 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>'
}
});