0

我正在使用 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]];
4

1 回答 1

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'   }             
        });    

JSFIDDLE演示

添加 tickRenderer: $.jqplot.CanvasAxisTickRenderer

于 2013-02-01T03:09:22.423 回答