棒グラフで JQplot カーソル ハイライターとデータ ハイライターを使用しています。棒グラフをズームすると、ツールチップが棒グラフの外に移動します。それを修正するのを手伝ってください。
jqplotで参照用に取った以下のリンクを見つけてください。
http://www.jqplot.com/deploy/dist/examples/zoomOptions.html
function barChart(stringId, value, yaxislabel,barchwidth)
{
//var line1 = [[6, 4], [7, 6.5], [8, 5.7], [9, 9], [10, 8.2]];
// var value= [[6, 4], [7, 6.5], [8, 5.7], [9, 9], [10, 8.2]];
/*console.log("in line");
console.log( 'stringId in barchart '+stringId );
console.log( 'value '+value );*/
var plot2 = $.jqplot(stringId, [value], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barPadding: 5, // number of pixels between adjacent bars in the same
// group (same category or bin).
barMargin: 1, // number of pixels between adjacent groups of bars.
barDirection: 'vertical', // vertical or horizontal.
barWidth: barchwidth,
highlightColors: 'red',
//tooltipLocation: 'sw',
// showTooltipDataPosition: false,
shadow: false// width of the bars. null to calculate automatically.
}
},
legend: { show: false ,
background: 'white',
placement: 'outside'
},
axes:{
xaxis:{
label:'Timestamp',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer ,
renderer:$.jqplot.DateAxisRenderer,
tickOptions: {
showGridline: false,
showMark: true,
showLabel: false,
shadow: false,
fontSize: '10pt',
formatString: '%m/%d/%y %H:%M:%S',
},
},
yaxis:{
label: [yaxislabel],
min: 0,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer ,
tickOptions: {
showGridline: false,
showMark: true,
showLabel: true,
shadow: false,
fontSize: '10pt',
},
}
},
animate: true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot: false,
cursor: {
show: true,
zoom: true,
looseZoom: false,
showTooltip: true
},
axesDefaults: {
show: false, // wether or not to renderer the axis. Determined automatically.
min: null, // minimum numerical value of the axis. Determined automatically.
max: null, // maximum numverical value of the axis. Determined automatically.
pad: 1.2, // a factor multiplied by the data range on the axis to give the
// axis range so that data points don't fall on the edges of the axis.
ticks: [], // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
// array of ticks to use. Computed automatically.
numberTicks: 5,
//renderer: $.jqplot.LinearAxisRenderer, // renderer to use to draw the axis,
// rendererOptions: {}, // options to pass to the renderer. LinearAxisRenderer
// has no options,
tickOptions: {
mark: 'outside', // Where to put the tick mark on the axis
// 'outside', 'inside' or 'cross',
showMark: false,
showGridline: false, // wether to draw a gridline (across the whole grid) at this tick,
markSize: 4, // length the tick will extend beyond the grid in pixels. For
// 'cross', length will be added above and below the grid boundary,
show: true, // wether to show the tick (mark and label),
showLabel: false, // wether to show the text label at the tick,
// format string to use with the axis tick formatter
}
},
highlighter: {
show: true,
showMarker: true,
showTooltip: false,
sizeAdjust: 7.5
}
});
}