2013-02-01 108 views
0

我正在使用JqPlot,并且我的图形上的数据没有显示。我能请一些帮助来解决这个图吗?JqPlot图形显示不正确

这里是我的代码:

plot0 = $.jqplot('totalTakings', [line0,line1,line2,line3,line4,line5,line6,line7], { 
      legend:{show:false}, 
      title:'<b>Total Takings</b>', 
      seriesDefaults:{pointLabels:{show:false}}, 
      grid: {background:'#f8f8f8', gridLineColor:'#dbdbdb',borderWidth: 0,shadowDepth: 0}, 
      axes:{ 
       yaxis: { autoscale:true, tickOptions:{formatString:'$%.0f'},label: 'NZ$', min:0}, 
       xaxis:{ label: 'Months', renderer:$.jqplot.DateAxisRenderer, tickInterval:'1 month',tickOptions:{formatString:'%b %#d, %Y'} } 
      }, 
      seriesColors: [ "#329dd5", "#0d8e17", "#f47320", "#7678ab", "#ecd77e", "#84b586","#bc8b7c", "#015253"], 
      highlighter: { tooltipLocation: 'n',tooltipAxes: 'both',tooltipSeparator: ' - ',tooltipOffset: 10,sizeAdjust: 8,tooltipFadeSpeed:'slow' }    
     });   
     plot0.series[0].show = false;  
     plot0.redraw(); 
    //toggles graph series 

     $(".daycheck").click(function(){     
      $(".daycheck").each( 

       function(index) { 
        //alert(index); 
        if ($(this).is(':checked')) { 

         plot0.series[index].show = true;               
        } else { 
         //alert(index+'unchecked'); 
         plot0.series[index].show = false; 
        }  
        plot0.replot(); 
       }); 
     }); 

这里是该行的某些示例数据:

line0=[["2012-10-07",36301],["2012-10-14",42640],["2012-10-21",40977], 
     ["2012-10-28",29415],["2012-11-04",41362],["2012-11-11",37982], 
     ["2012-11-18",37237],["2012-11-25",40290],["2012-12-02",37203], 
     ["2012-12-09",46519],["2012-12-16",10280]]; 

line1=[["2012-10-01",2253],["2012-10-08",3466],["2012-10-15",2657], 
     ["2012-10-22",4267],["2012-10-29",2628],["2012-11-05",1815], 
     ["2012-11-12",3091],["2012-11-19",2291],["2012-11-26",2672], 
     ["2012-12-03",4273],["2012-12-10",3321]]; 

line2=[["2012-10-02",4784],["2012-10-09",5088],["2012-10-16",4544], 
     ["2012-10-23",3311],["2012-10-30",4309],["2012-11-06",7498], 
     ["2012-11-13",3986],["2012-11-20",5137],["2012-11-27",5792], 
     ["2012-12-04",7247],["2012-12-11",6959]]; 

line3=[["2012-10-03",5121],["2012-10-10",6175],["2012-10-17",4073], 
     ["2012-10-24",3543],["2012-10-31",2485],["2012-11-07",2437], 
     ["2012-11-14",2513],["2012-11-21",5362],["2012-11-28",3848], 
     ["2012-12-05",3707]]; 

line4=[["2012-10-04",4849],["2012-10-11",3917],["2012-10-18",3857], 
     ["2012-10-25",3398],["2012-11-01",5187],["2012-11-08",5724], 
     ["2012-11-15",4154],["2012-11-22",5250],["2012-11-29",3804], 
     ["2012-12-06",4947]]; 

line5=[["2012-10-05",7139],["2012-10-12",10947],["2012-10-19",9889], 
     ["2012-10-26",6164],["2012-11-02",8740],["2012-11-09",8490], 
     ["2012-11-16",7615],["2012-11-23",12008],["2012-11-30",10772], 
     ["2012-12-07",7921]]; 

line6=[["2012-10-06",9409],["2012-10-13",9382],["2012-10-20",8085], 
     ["2012-10-27",5535],["2012-11-03",14852],["2012-11-10",7900], 
     ["2012-11-17",10291],["2012-11-24",5752],["2012-12-01",7111], 
     ["2012-12-08",13797]]; 

line7=[["2012-10-07",2746],["2012-10-14",3665],["2012-10-21",7873], 
     ["2012-10-28",3197],["2012-11-04",3162],["2012-11-11",4118], 
     ["2012-11-18",5587],["2012-11-25",4490],["2012-12-02",3203], 
     ["2012-12-09",4627]]; 

回答

0

试试这个

jQuery.jqplot('totalTakings', [line0,line1,line2,line3,line4,line5,line6], { 
      legend:{show:false}, 
      title:'<b>Total Takings</b>', 
      seriesDefaults:{pointLabels:{show:false}}, 
      grid: {background:'#f8f8f8', gridLineColor:'#dbdbdb',borderWidth: 0,shadowDepth: 0}, 
      axes:{ 
       yaxis: { autoscale:true, tickOptions:{formatString:'$%.0f'},label: 'NZ$', min:0}, 
       xaxis: { 
       renderer: $.jqplot.DateAxisRenderer, 
       //rendererOptions: {tickRenderer: $.jqplot.canvasAxisTickRenderer},//this is incorrect as tickRenderer should be outside rendererOptions 
       tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
        //tickinterval:'1 month', 
        min:'Oct 1,2012', 
       tickOptions: { 

        // tickinterval:'1 month', 
        formatString:'%b %#d, %Y', 
        angle: -45 
       } 
      } 
      }, 
      seriesColors: [ "#329dd5", "#0d8e17", "#f47320", "#7678ab", "#ecd77e", "#84b586","#bc8b7c", "#015253"], 
      highlighter: { tooltipLocation: 'n',tooltipAxes: 'both',tooltipSeparator: ' - ',tooltipOffset: 10,sizeAdjust: 8,tooltipFadeSpeed:'slow' }    
     });  

的jsfiddleDEMO

tickRenderer: $.jqplot.CanvasAxisTickRenderer