jqPlot條形圖出現問題

Question

我使用jqPlot創建條形圖，但遇到了一些問題。

問題1：圖上的第一個和最後一個條被切斷。只有一半是顯示

問題2：我不希望我的數據點跨越整個x軸。是否有數據跨越整個x軸？

ex：這就是現在的情況。

這是我傳遞進去

var chartData = [["19-Jan-2012",2.61],["20-Jan-2012",5.00],["21-Jan-2012",6.00]] 

這是我使用jQuery的數據。

// Plot chart 
     function PlotChart(chartData, numberOfTicks) { 
      $.jqplot.config.enablePlugins = true; 
       var plot2 = $.jqplot('chart1', [chartData], { 
        title: 'Mouse Cursor Tracking', 
        seriesDefaults:{ 
         renderer: $.jqplot.BarRenderer, 
         rendererOptions: { 
          barPadding: 1, 
          barMargin: 15, 
          barDirection: 'vertical', 
          barWidth: 50 
         }, 
         pointLabels: { show: true } 
        }, 
        axes: { 
         xaxis: { 
          pad: 0,  // a factor multiplied by the data range on the axis to give the 
          numberTicks: numberOfTicks, 
          renderer: $.jqplot.DateAxisRenderer, // renderer to use to draw the axis, 
          tickOptions: { 
           formatString: '%b %#d' // format string to use with the axis tick formatter 
          } 
         }, 
         yaxis: { 
          tickOptions: { 
           formatString: '$%.2f' 
          } 
         } 
        }, 
        highlighter: { 
         sizeAdjust: 7.5 
        }, 
        cursor: { 
         show: true 
        } 
       }); 
      } 

Answer 1

從您希望您的情節看，如果切換到使用CategoryAxisRenderer代替DateAxisRenderer，你會爲自己省下不少麻煩。 CategoryAxisRenderer在顯示謹慎的數據分組方面要好得多，而不是真正的時間序列。

var axisDates = ["Jan 19", "Jan 20", "Jan 21"] 
var chartData = [2.61,5.00,6.00] 

     $.jqplot.config.enablePlugins = true; 
      var plot2 = $.jqplot('chart2', [chartData], { 
       title: 'Some Plot', 
       seriesDefaults:{ 
        renderer: $.jqplot.BarRenderer, 
        rendererOptions: { 
         barPadding: 1, 
         barMargin: 15, 
         barDirection: 'vertical', 
         barWidth: 50 
        }, 
        pointLabels: { show: true } 
       }, 
       axes: { 
        xaxis: {        
          renderer: $.jqplot.CategoryAxisRenderer, 
          ticks: axisDates 
        }, 
        yaxis: { 
         tickOptions: { 
          formatString: '$%.2f' 
         } 
        } 
       }, 
       highlighter: { 
        sizeAdjust: 7.5 
       }, 
       cursor: { 
        show: true 
       } 
      }); 

Answer 2

DateAxisRenderer實際上是用於線條圖而不是條形圖。當你將它與條形圖結合使用時，它就無法正常工作。 DateAxisRenderer的想法/目標是在日期/時間內製作一個線性/準確的時間圖。這樣，如果您錯過了日期輸入，它仍然會按比例繪製。在這裏查看DateAxisRenderer上的示例：http://www.jqplot.com/tests/date-axes.php

您想要使用的是CategoryAxisRenderer。然後，您可以重寫/創建您自己的刻度標籤渲染器，並且很好。通常情況下，您不希望將額外的空項目追加到項目，特別是如果它們爲空，但是，如果您這樣做，只需將它們追加到您的數據數組。

這裏有一個做的jsfiddle你想要什麼：http://jsfiddle.net/fordlover49/JWhmQ/

注意，你可能想看看在管理資源來檢驗哪些文件需要引用（除了jQuery的文件）。

下面是情況下的jsfiddle起到了JavaScript的：

$.jqplot.config.enablePlugins = true; 
var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]]; 

// add a custom tick formatter, so that you don't have to include the entire date renderer library. 
$.jqplot.DateTickFormatter = function(format, val) { 
    // for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle 
    val = (new Date(val)).getTime(); 
    format = '%b&nbsp%#d' 
    return $.jsDate.strftime(val, format); 
}; 

function PlotChart(chartData, extraDays) { 
    // if you want extra days, just append them to your chartData array. 
    if (typeof extraDays === "number") { 
     for (var i = 0; i < extraDays; i++) { 
      var actualDate = new Date(chartData[chartData.length - 1]); // convert last entry to actual date 
      var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate() + 1); // create new increased date 
      chartData.push([newDate, 0]); 
     } 
    } 

    var plot2 = $.jqplot('chart1', [chartData], { 
     title: 'Mouse Cursor Tracking', 
     seriesDefaults: { 
      renderer: $.jqplot.BarRenderer, 
      rendererOptions: { 
       barPadding: 1, 
       barWidth: 50 
      }, 
      pointLabels: { 
       show: true 
      } 
     }, 
     axes: { 
      xaxis: { 
       pad: 1, 
       // a factor multiplied by the data range on the axis to give the    
       renderer: $.jqplot.CategoryAxisRenderer, 
       // renderer to use to draw the axis,  
       tickOptions: { 
        formatString: '%b %#d', 
        formatter: $.jqplot.DateTickFormatter 
       } 
      }, 
      yaxis: { 
       tickOptions: { 
        formatString: '$%.2f' 
       } 
      } 
     }, 
     highlighter: { 
      sizeAdjust: 7.5 
     }, 
     cursor: { 
      show: true 
     } 
    }); 
} 

PlotChart(chartData, 3); 

Answer 3

下面是一個簡單的黑客，我用來顯示餘量。

我創建了一個開始日期和結束日期，分別是我想要顯示的內容前一天和後一天。

例如，如果我想顯示2012年1月

var startingDate = new Date(2012, 0, 0); //=> 31th Dec 2011 
var endingDate = new Date(2012, 1, 1); //=> 1st Feb 2012 

月份然後我宣佈我自己DateTickFormatter，我不會印出這兩個日期。

$.jqplot.DateTickFormatter = function(format, val) { 
     if (!format) { 
      format = '%Y/%m/%d'; 
     } 

     if(val==startingDate.getTime() || val==endingDate.getTime()){ 
      return ""; 
     }else{ 
      return $.jsDate.strftime(val, format); 
     } 
    }; 

然後在xaxis我把下面的選項：

xaxis : { 
     renderer:$.jqplot.DateAxisRenderer, 
     min:startingDate, 
     max:endingDate, 
     tickInterval:'1 day' 
}