如何在jqplot折线图中设置/绘制分钟图?

时间:2012-09-21 13:48:51

标签: javascript jquery-ui charts jqplot linechart

我想动态绘制图表.. 取决于用户的选择。下面是屏幕截图.. enter image description here

在这里我做了一些事情。

var plot2 = $.jqplot(div, mainArray, {
                            title:chartValue[1],
                            seriesDefaults: {
                                lineWidth:1,
                                markerOptions: { show:true, size:3 },
                                rendererOptions: {
                                    smooth: true
                                }
                            },
                            axesDefaults: {
                                labelOptions:{textColor:'#313233', fontSize:'11px',fontWeight:'Bold', fontFamily:'Arial'}
                            },
                            axes:{
                                xaxis:{
                                    renderer: $.jqplot.DateAxisRenderer,
                                    rendererOptions:{
                                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                        tickInset:0
                                    },
                                    //tickRenderer:$.jqplot.CanvasAxisTickRenderer,
                                    tickOptions:{
                                        autoscale:true,
                                        fontSize:'10px',
                                        fontFamily:'Arial',
                                        angle:-90,
                                        formatString: dFormat
                                    },
                                    //min: minDate,
                                    //max: maxDate,
                                    tickInterval:timeInterval
                                },
                                yaxis:{
                                    min: 0,
                                    max: maxV.length > 1 ? parseInt(maxV) + ((parseInt(maxV)/10)): parseInt(maxV)+2,
                                    tickOptions: {
                                        formatString: '%d',
                                        fontSize:'10px',
                                        fontFamily:'Arial',
                                        showGridline: true,
                                        showLabel: true
                                    },
                                    base: Math.E,
                                    forceTickAt0: true
                                }
                            },

                            legend: {
                                show: true,
                                labels: legendNames,
                                //placement: 'outsideGrid'
                                renderer:$.jqplot.EnhancedLegendRenderer,
                                location: 'ne',     // compass direction, nw, n, ne, e, se, s, sw, w.
                                xoffset: 10,        // pixel offset of the legend box from the x (or x2) axis.
                                yoffset: 10        // pixel offset of the legend box from the y (or y2) axis.
                            },

                            cursor:{
                                show:true,
                                style:'auto',
                                followMouse:true,
                                zoom:true,
                                looseZoom:true,
                                showTooltip:false
                            }

                        });

在这个从12.00开始的时间。但我希望它靠近数据。怎么可能?

注意:

mainArray = data
dFormat = string format for date time

1 个答案:

答案 0 :(得分:1)

我认为您只需要在min下设置已注释掉的xaxis属性。

根据mainArray格式的格式,您可以使用mainArray[0][0][0]mainArray[0][0]获取第一个日期值。或者,您可能必须设置/传递变量minDate