1

我有这个 jqplot 条形图。条的当前显示是垂直显示的，我想水平显示它。

如何设置 jqplot 属性，以便使图形水平显示并使用百分比值保留输出？

我希望你能帮我做这件事。谢谢 ：）

这是代码

附加脚本

<!--[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>

我想要的结果

4

3 回答 3

7 
$(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-11T02:36:56.307 回答
0 
$(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-21T17:15:24.270 回答
0

根据jqplot 站点，有一个 barDirection 选项可以指定为水平。试试rendererOptions:{barDirection:'horizontal', barMargin: 25},你的代码。

于 2011-04-07T04:19:49.137 回答