如何在xaxis爲文本時顯示jqplot堆積條形圖？

我似乎無法讓我的jqplot條形圖堆疊。我有以下代碼：如何在xaxis爲文本時顯示jqplot堆積條形圖？

// Pass/Fail rates per request 
$.jqplot('passFailPerRequestStats', [passRate, failRate], { 
    title: 'Automation Pass Count Per Test Plan', 
    //stackSeries: true, 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     renderOptions: { barMargin: 25 }, 
     pointLabels: { show: true, stackedValue: true } 
    }, 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      angle: -30, 
      fontSize: '10pt' 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer 
     } 
    } 
});

這是成功顯示兩個系列的並排條形圖。但是，當我試圖通過取消stackSeries: true,的註釋來堆疊它們時，所有條形圖都從圖上取下（並且所有點標籤都顯示在Y軸標籤上）。

我在做什麼錯？

來源

2011-10-20 KallDrexx

您需要在rendererOptions對象中包含barDirection。

rendererOptions: { 
       barDirection: 'vertical', 
       highlightMouseDown: true  
      }

請確保在最後一個括號後包含逗號，如果有更多選項遵循這一點。該堆棧還需要指定xaxis。

您的數據結構應該如下所示。每個項目中的前導數字表示X軸。

var s1 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]]; 
    var s2 = [[1,12],[2,11],[3,10],[4,9],[5,8],[6,7],[7,6],[8,5],[9,4],[10,3],[11,2],[12,1]]; 
    var s3 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]]; 
    var months = ['Jan', 'Feb', 'Mar', 'Apr',"May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; 
    plot4 = $.jqplot('chartdiv', [ 
    s1, 
    s2, 
    s3 
    ],

在ticks選項中使用月份（或任何你想要的文字），像這樣。

xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: months 
      }

來源

2011-10-25 14:56:57 Jack

無論是酒吧方向，並重新格式化通過使用x軸的數值（使用特殊的刻度值）來修正它的值！非常感謝！ – KallDrexx

你可以指定你使用了什麼特殊的刻度，因爲我面臨同樣的問題，並指定酒吧方向沒有幫助... –

我加入這個解決方案，因爲我找到了以前發佈的一個不是在我的環境中工作（雖然它沒有把我在正確的軌道上，所以感謝@Jack） - 以下爲我工作在ASP運行jqPlot 1.0.8r1250與jQuery 1.9.1和jQuery UI 1.1O.3的.NET MVC3網站：對我來說，添加渲染rendererOptions{...}竟然是不必要的。

我還發現stackedValue: true下的seriesDefaults > pointLabels節點沒有任何效果，取而代之的是我不得不在根節點下取消註釋stackSeries: true。

我的最終代碼：

var s1 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]]; 
var s2 = [[1, 12], [2, 11], [3, 10], [4, 9], [5, 8], [6, 7], [7, 6], [8, 5], [9, 4], [10, 3], [11, 2], [12, 1]]; 
var s3 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]]; 

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 

$.jqplot('chartdiv', [s1, s2, s3], { 
    title: 'Automation Pass Count Per Test Plan', 
    stackSeries: true, 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     renderOptions: { barMargin: 25 } 
    }, 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      angle: -30, 
      fontSize: '10pt' 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: months 
     } 
    } 
});

另外，還要確保你包括以下幾個環節：

<script src="/.../jquery.jqplot.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.barRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.canvasTextRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.dateAxisRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.canvasAxisTickRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script>

希望這幫助的人在未來

來源

2013-07-18 14:07:57 Chopo87

如何在xaxis爲文本時顯示jqplot堆積條形圖？

回答

相關問題