2013-03-05 52 views
0

新的jqPlot和我正在努力與數據和標籤的水平圖表。jqPlot水平條形圖點標籤挑戰

這是問題所在。我想要的圖表看起來應該是這樣:

http://www.ifthen.biz/DesiredChart.png

我的實際圖表然而,看起來是這樣的:

http://www.ifthen.biz/ActualChart.png

似乎無法得到點標籤(在這種情況下是和否)以對應每個問題的數據。

每個問題有一個是或否的答案。對於每個「是」或「否」,我會得出答案,以便我可以得到所需的圖表。

請參閱下面的代碼:

 <script> 
     $(document).ready(function() { 
      var q1 = [20, 58]; 
      var q2 = [5, 21]; 
      var plot1 = $.jqplot('quickStatsChart', [q1,q2], { 
       seriesDefaults: { 
        renderer: $.jqplot.BarRenderer, 
        shadowAngle: 60, 
        showMarker: false, 
        rendererOptions: { 
         barDirection: 'horizontal' 
        }, 
        pointLabels:{ 
         show: true, 
         location: 'e', 
         labels: ['Yes','No'] 
        } 
       }, 
       axes: { 
        yaxis: { 
         renderer: $.jqplot.CategoryAxisRenderer, 
         ticks: ['Question 1', 'Question 2'] 
        } 
       } 
      }); 
     }); 
    </script> 

任何想法,我怎樣才能使這項工作?

++的Tx

這是新的代碼,我想:

 <script> 
     $(document).ready(function() { 
      // [ tally question 1, tally question 2] 
      var sX = [[[2,'q1'], [4,'q2']], // Yes' 
         [[5,'q1'], [1,'q2']]]; // No's 
      var plot1 = $.jqplot('quickStatsChart', sX, { 
       seriesDefaults: { 
        renderer: $.jqplot.BarRenderer, 
        shadowAngle: 60, 
        showMarker: false, 
        rendererOptions: { 
         barDirection: 'horizontal' 
        }, 
        pointLabels:{ 
         show: true, 
         location: 'e', 
         labels: ['Yes','No'] 
        } 
       }, 
       axes: { 
        yaxis: { 
         renderer: $.jqplot.CategoryAxisRenderer 
        } 
       } 
      }); 
     }); 
    </script> 

的結果是一樣的高於實際走勢。

回答

0

入住這link正如你所看到的變量的第二個數字是y軸

$(document).ready(function(){ 
    var plot2 = $.jqplot('chart2', [ 
     [[2,1], [4,2], [6,3], [3,4]], 
     [[5,1], [1,2], [3,3], [4,4]], 
     [[4,1], [7,2], [1,3], [2,4]]], { 
     seriesDefaults: { 
      renderer:$.jqplot.BarRenderer, 
      pointLabels: { show: true, location: 'e', edgeTolerance: -15 }, 
      shadowAngle: 135, 
      rendererOptions: { 
       barDirection: 'horizontal' 
      } 
     }, 
     axes: { 
      yaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer 
      } 
     } 
    }); 
}); 

嘗試刪除它是唯一的區別的名稱。如果作品更改q1與是和q2與否

pointLabels:{ 
    show: true, 
    location: 'e', 
    labels: ['Yes','No'] 
} 
+0

感謝您的答覆。我特別試圖將pointLabels設置爲是或否。我遵循你的例子,但仍然有同樣的問題。 – Peter 2013-03-06 12:25:39

+0

你能寫出你所做的代碼嗎 – kilkadg 2013-03-06 12:27:06

+0

我剛纔編輯我的帖子以顯示最新使用的代碼。 – Peter 2013-03-06 14:55:33