admin管理员组

文章数量:1291002

Ok, I've got a bar chart. And it basically works... but the labels on the y-axis are kinda long and wrap and then run into each other.

I've tried changing the css, but it gets overidden by JS. I tried scanning thru the jqplot library to find out where it happens but i got lost. Any ideas? is there just an option i can set?

You can see here:

Here is my html file:

<html>
<head>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script>
    $(function() {
        graph_me('chart1',[ 'This is a label', 'This is another label..', 'Is this too long? This looks like it might break','Im not sure, but '], [40, 20, 5, 1]);
    });
    function graph_me(div_name, labels_in, values_in) {
        var labels = labels_in.reverse();
        var values = values_in.reverse();
        $.jqplot(div_name, [values], {
            series:[{
                renderer:$.jqplot.BarRenderer,
                rendererOptions: {
                    barDirection: 'horizontal',
                    varyBarColor: true
                    }
                }
            ],
            axes: {
                yaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer, 
                    ticks: labels,
                    tickOptions: {
                        showGridline: false,
                        markSize: 0
                    }
                }
            }
        });
    }
</script>
</head>
<body>
<div id="chart1" style="height:400px;width:500px; margin: 0 auto;"></div>
</body>
</html>

Ok, I've got a bar chart. And it basically works... but the labels on the y-axis are kinda long and wrap and then run into each other.

I've tried changing the css, but it gets overidden by JS. I tried scanning thru the jqplot library to find out where it happens but i got lost. Any ideas? is there just an option i can set?

You can see here:

Here is my html file:

<html>
<head>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script>
    $(function() {
        graph_me('chart1',[ 'This is a label', 'This is another label..', 'Is this too long? This looks like it might break','Im not sure, but '], [40, 20, 5, 1]);
    });
    function graph_me(div_name, labels_in, values_in) {
        var labels = labels_in.reverse();
        var values = values_in.reverse();
        $.jqplot(div_name, [values], {
            series:[{
                renderer:$.jqplot.BarRenderer,
                rendererOptions: {
                    barDirection: 'horizontal',
                    varyBarColor: true
                    }
                }
            ],
            axes: {
                yaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer, 
                    ticks: labels,
                    tickOptions: {
                        showGridline: false,
                        markSize: 0
                    }
                }
            }
        });
    }
</script>
</head>
<body>
<div id="chart1" style="height:400px;width:500px; margin: 0 auto;"></div>
</body>
</html>
  • javascript
  • jquery
  • css
  • jqplot
Share Improve this question edited Aug 5, 2011 at 2:37 icchanobot asked Aug 4, 2011 at 9:16 icchanoboticchanobot 3,34329 silver badges37 bronze badges 2
  • I am having the sae problem icchanobot - did you manage to find a solution? – davy Commented Aug 5, 2011 at 12:47
  • @davy : the solution below worked for me, I think I just needed the !important part – icchanobot Commented Aug 10, 2011 at 8:50
Add a ment  | 

1 Answer 1

Reset to default 8

You could try this in your css:

.jqplot-yaxis {
  margin-left:-80px !important;
  width:80px !important;
}

本文标签： javascriptChanging the width of the yaxis label area in jqplotStack Overflow

版权声明：本文标题：javascript - Changing the width of the y-axis label area in jqplot - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741499106a2381974.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。