水平渲染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条形图

回答

相关问题