突出显示数据时,jqplot未正确缩放

时间:2013-02-16 11:56:07

标签: jquery jqplot bar-chart

我在条形图中使用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
                      }

                });


        }

1 个答案:

答案 0 :(得分:0)

也许这会有所帮助:jsfiddle.net/AnthonyLeGovic/xwhqV/15/