如何让xaxis使用jqPlots显示日期

时间:2015-06-09 10:31:57

标签: date charts jqplot

我正在尝试使用jqPlots制作条形图。我用ajax从数据库中获取数据。在垂直方向,它显示价格 - 它们是正确的。但我的问题是如何在xaxis中显示日期。每个栏应根据日期放置在水平的正确位置。例如,我对三个栏的当前日期是:2015-06-06,2015-06-08,2015-06-30。 如果我在xaxis中使用renderer: $.jqplot.CategoryAxisRenderer,日期显示正确,但条形图的位置不依赖于该日期。 http://prntscr.com/7ew365

如果我使用renderer:$.jqplot.DateAxisRenderer,它会以这种方式看待: http://prntscr.com/7ew1ot 日期不会显示。他们应该是:

var ticks2 = ['2015-05-31', '2015-06-06', '2015-06-13', '2015-06-20','2015-06-27','2015-07-03'];

但是当我把:ticks:ticks2,我的酒吧消失了。

我的观点是:

  $(document).ready(function(){
    var ticks2 = ['2015-05-31', '2015-06-06', '2015-06-13', '2015-06-20','2015-06-27','2015-07-03'];
var ticks = ['0.02', '0.04', '0.06', '0.08','0.1','0.12'];
       $.ajax({
          url: "<?= base_url() ?>index.php/receivedOrders/get_prices",
          dataType:"json",
          }).success(function(responseText) {
                 console.log(responseText)
                 $.jqplot.config.enablePlugins = true;
             var plot2 = $.jqplot('column_chart', responseText, {
               
                 seriesDefaults:{
                     renderer: $.jqplot.BarRenderer,
                
                     rendererOptions: {
                        barPadding: 1,
                        barMargin: 15,
                        barDirection: 'vertical',
                        barWidth: 50
                    }, 
                    pointLabels: { show: true }
                },
                axes: {
                    xaxis:{
                       renderer:$.jqplot.DateAxisRenderer, 
              // ticks: ticks2,
                tickOptions: {
                    
                    formatString:' %Y-%m-%d %H:%M'
                    //, min:'2015-06-06', max:'2015-06-30',  tickInterval:'7 days'
                },

        },
                  yaxis: {
          
           ticks: ticks,
                        tickOptions: {
                           
                            formatString: '%.2f'
                        },

                    }
                },
                highlighter: {
                    sizeAdjust: 7.5
                },
                cursor: {
                    show: true
                }
            });


          }
);

});
                      

0 个答案:

没有答案