Ändern Sie die Breite der y-Achsenbeschriftung Bereich in jqplot

Ok, ich habe ein Balken-Diagramm.
Und es funktioniert im Grunde... aber die Beschriftung auf der y-Achse sind ein bisschen lang und wickeln und dann Ineinander über.

Ich habe versucht, die änderung der css, aber es wird überschrieben durch JS.
Ich habe versucht, das Scannen durch die jqplot Bibliothek, um herauszufinden, wo es passiert, aber ich habe verloren.
Irgendwelche Ideen? gibt es nur eine option die ich einstellen kann?

Können Sie hier sehen:

Ändern Sie die Breite der y-Achsenbeschriftung Bereich in jqplot

Hier ist meine html-Datei:

<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>
  • Ich bin mit der sae problem icchanobot - haben Sie es geschafft, eine Lösung zu finden?
  • die folgende Lösung funktionierte für mich, ich glaube, ich brauchte nur die !important Teil
InformationsquelleAutor icchanobot | 2011-08-04
  1. 8

    Könnte man versuchen, diese in Ihrer css:

    .jqplot-yaxis {
  margin-left:-80px !important;
  width:80px !important;
}
    • Hey danke, ich hab es herauszufinden über eine Antwort sehr ähnlich wie diese.
    InformationsquelleAutor Joseph Marikle
Schreibe einen Kommentar