如何使用jqplot条形图隐藏标签并在荧光笔中显示值

时间:2013-03-06 10:15:40

标签: jquery jqplot

我正在尝试隐藏所有标签,只是在鼠标悬停在相关栏上时,只显示jqplot中条形图的x和y值。我已经能够摆脱y轴标签,但无法正确摆脱x轴标签。此外,x轴的突出显示器中的值将转换为整数,而不是包含文本值。有什么想法吗?

这是html:

    <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>

1 个答案:

答案 0 :(得分:0)

荧光笔:{                          显示:是的,                          sizeAdjust:7.5,                          tooltipAxes:'y',                          },

//////////////

tooltipAxes:'both',//哪些轴值显示在工具提示,x,y或两者中。