Question

好的，我有条形图。它基本上可以工作......但是y轴上的标签有点长并且包裹然后相互碰撞。

我已经尝试过改变css，但它被JS覆盖了。我尝试通过jqplot库扫描，找出它发生的地方，但我迷路了。有任何想法吗？我可以设置一个选项吗？

你可以在这里看到：

enter image description here

这是我的html文件：

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

Answer 1

你可以在你的css中试试这个：

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

在jqplot中更改y轴标签区域的宽度

1 个答案: