1
모든 레이블을 숨기고 문제의 막대 위로 마우스를 가져 가면 jqplot에 막대 그래프의 x 및 y 값을 표시하려고합니다. 나는 y 축 레이블을 제거 할 수 있었지만 X 축 레이블을 올바르게 제거하지 못했습니다. 또한 X 축의 형광펜 값은 텍스트 값을 포함하지 않고 정수로 변환됩니다. 어떤 아이디어?jqplot 막대 차트로 형광펜에 레이블을 숨기고 값을 표시하는 방법
<html>
<head>
<!--[if lt IE 9]><script language="javascript" type="text/javascript"
src="/static/jqplot/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.highlighter.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.cursor.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jqplot.com/src/jquery.jqplot.min.css" />
</head>
<div id="numbertimeschart" style="width: 800px; height=600px"></div>
<script type="text/javascript">
$.jqplot('numbertimeschart', [[['Nov 10, 2012, 02:22PM, number 6', 123.70500016212463], ['Nov 10, 2012, 02:22PM, number 5', 121.24499988555908], ['Nov 10, 2012, 02:22PM, number 4', 123.40899991989136], ['Nov 10, 2012, 02:22PM, number 3', 123.13800001144409], ['Nov 10, 2012, 02:22PM, number 2', 127.06200003623962], ['Nov 10, 2012, 01:10PM, number 9', 121.8140001296997], ['Nov 10, 2012, 01:10PM, number 8', 124.24000000953674], ['Nov 10, 2012, 01:10PM, number 7', 122.05999994277954], ['Nov 10, 2012, 01:10PM, number 6', 124.79999995231628], ['Nov 10, 2012, 01:10PM, number 5', 123.58000016212463], ['Nov 10, 2012, 01:10PM, number 4', 124.0149998664856], ['Nov 10, 2012, 01:10PM, number 3', 124.79500007629395], ['Nov 10, 2012, 01:10PM, number 2', 126.04999995231628], ['Nov 10, 2012, 11:37AM, number 8', 120.31300020217896], ['Nov 10, 2012, 11:37AM, number 7', 123.29999995231628], ['Nov 10, 2012, 11:37AM, number 6', 122.19000005722046], ['Nov 10, 2012, 11:37AM, number 5', 121.6819999217987], ['Nov 10, 2012, 11:37AM, number 4', 122.83599996566772], ['Nov 10, 2012, 11:37AM, number 3', 124.12800002098083], ['Nov 10, 2012, 11:37AM, number 2', 127.18899989128113]]],{
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
},
series:[
{
label: 'Most recent 20 numbers for Test',
color: '#fa554f',
markerOptions: {
show: false,
},
},
],
grid:{
background: "#FFFFFF",
gridLineColor: "#222222",
borderColor: "#323232",
borderWidth: 1.0,
},
axesDefaults: {
pad: 0,
showTicks: false,
showTickMarks: false,
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
rendererOptions: {
tickRenderer: $.jqplot.AxisTickRenderer,
tickOptions: {
show: false,
showLabel: false,
formatString: '%s',
},
}
},
yaxis:{
tickOptions: {
formatString: '%.2f',
}
}
},
highlighter: {
show: true,
sizeAdjust: 0,
tooltipLocation: 'ne',
},
legend:{
show: true,
location: 'nw',
},
cursor:{
show: false,
}
});
</script>
</html>