水平渲染Jqplot條形圖

我有這個jqplot條形圖。豎線顯示豎線的當前顯示，我想橫向顯示。水平渲染Jqplot條形圖

如何設置jqplot屬性，以便我可以水平顯示圖形並使用百分比值保留輸出？

我希望你能幫我做到這一點。謝謝:)

下面是代碼

附Scirpts

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]--> 
<script src="../jquery-1.4.4.min.js" language="javascript" type="text/javascript" ></script> 
<script src="../jquery.jqplot.js" language="javascript" type="text/javascript" ></script> 
<script src="../plugins/jqplot.categoryAxisRenderer.js" language="javascript" type="text/javascript" ></script> 
<script src="../plugins/jqplot.dateAxisRenderer.js" language="javascript" type="text/javascript" ></script> 
<script src="../plugins/jqplot.barRenderer.js" language="javascript" type="text/javascript" ></script> 
<script src="../plugins/jqplot.pointLabels.js" language="javascript" type="text/javascript" ></script>

JQuery的初始化

$(document).ready(function(){ 
    $.jqplot.config.enablePlugins = true;  
    line1 = [20, 0]; 
    plot2 = $.jqplot('chart2', [line1], { 
     seriesColors: ["#82BC24","#363636"], 
     seriesDefaults: { 
      renderer: $.jqplot.BarRenderer, 
      rendererOptions:{barMargin: 25}, 
      yaxis:'y2axis', 
      shadow: false 
     }, 
     axes: { 
      xaxis:{ 
       ticks:[2010, 2040], 
       renderer:$.jqplot.CategoryAxisRenderer, 
       tickOptions:{markSize:0} 
      }, 
      y2axis:{ticks:[0, 100], tickOptions:{formatString:'%d\%'}} 
     } 
    }); 
});

的HTML

<div id="chart2" class='plot' style="margin-top:20px; 
    margin-left:20px; width:200px; height:200px;"> 
</div>

The Result I wanted

來源

2011-04-07 Carls Jr.

http://stackoverflow.com/questions/13795649/how-to-make-jqplot-bar-chart-point-labels-vertical-align 可能幫助一些之一。 – Dharmik 2012-12-19 12:30:58

嘗試切換x軸和y軸，東西的選項，如 x-軸：{ 蜱：[0，100]， tickOptions：{formatString的： '％d \％'} }， y2axis：{ 蜱：2010年，2040年]，渲染：$ jqplot.CategoryAxisRenderer， tickOptions：{markSize：0}} – 2016-06-16 15:51:27

$(document).ready(function(){   
    $.jqplot.config.enablePlugins = true;  

    plot = $.jqplot('chart1', [[[60,'Nike'],[50,'Addidas'],[30,'Converse']]], { 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      shadowAngle: 135, 
      rendererOptions: { 
       barDirection: 'horizontal', 
       barWidth:15, 
       barMargin: 25 
      } 
     }, 
     axes: { 
      yaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       tickOptions:{ 
        showGridline:true, 
        markSize:0 
       } 
      }, 
      xaxis:{ 
       ticks:[0,100], 
       tickOptions:{formatString:'%d\%'} 
      } 
     } 
    }); 
    // this line would append the % sign on the end of the values 
    $('.jqplot-point-label').append('%'); 

});

來源

2011-04-11 02:36:56

按照jqplot site，有其可以被指定爲一個水平barDirection選項。在您的代碼中嘗試rendererOptions:{barDirection:'horizontal', barMargin: 25},。

來源

2011-04-07 04:19:49 user631644

嘗試過，但它的工作不是:) – 2011-04-07 05:31:38

，我建議你適應/從jqplot修改水平情節例子鏈接在答案，以滿足您的需求。 – user631644 2011-04-07 17:26:12

$(document).ready(function(){  

data = [[10,' '],[100,', Test1'],[250,'Test2'],[62,' Test3'],[95,'Test4'], 
     [20,'Test5'],[66,'Test6'],[25,'Test7'],[0,'Test8']}; 


$.jqplot.config.enablePlugins = true;  

$('#barchartdisplay').jqplot([data], { 
    seriesDefaults: { 
     renderer:$.jqplot.BarRenderer, 
     shadowAngle: 135, 
     rendererOptions: { 
      barDirection: 'horizontal', 
      barWidth:15, 
      barMargin: 25, 
      varyBarColor: true 
     } 
    },     
    axesDefaults: { 
     //tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
     tickOptions: {      
     fontSize: '8pt' 
     } 
    }, 
    axes: { 
     yaxis: { 
     renderer: $.jqplot.CategoryAxisRenderer, 
     tickOptions:{ 
     showGridline:true, 
     markSize:0 
     } 
    }, 
    xaxis: { 
     //ticks:[0,100], 
     tickOptions:{formatString:'%d', fontSize: '8pt'}       
     } 
});

來源

2012-12-21 17:15:24 anu

水平渲染Jqplot條形圖

回答

相關問題