0
막 대형 차트에서 JQplot 커서 하이 라이터 및 데이터 하이 라이터를 사용하고 있습니다. 막대 차트를 확대/축소 할 때 도구 설명이 막대 차트 밖으로 이동합니다. 그것을 고치도록 도와주세요.데이터를 강조 표시 할 때 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
}
});
}
가능한 중복 [jqplot 커서 강조 표시가 제대로 작동하지 않습니다.] (http://stackoverflow.com/questions/14910296/jqplot-cursor-highlighting-is-not-working-properly-when-zoom-in) – Mark
전체 게시물 code – Nandu
글쎄, 문제를 재현 할 수 없다 : [Fiddle here] (http://jsfiddle.net/AnthonyLeGovic/e85T2/1/) - jqplot 플러그인 (jqplot.cursor.js, jqplot.highlighte r.js) - 정확한 위치에 커서 툴팁을 표시하려면 tooltipLocation 옵션을 사용하십시오 : 'tooltipLocation :'se'' ('n', 'ne', 'e', 'se', s '중 하나 ','sw ','w ','nw '- 북쪽은 n, 남쪽은 e, 동쪽은 e, 서쪽은 w) – AnthonyLeGovic