wake-up-neo.com

Wie wird der Titel der ChartJS-Y-Achse festgelegt?

Ich benutze Chartjs zum Anzeigen von Diagrammen und ich muss den Titel der y-Achse festlegen, aber es gibt keine Informationen darüber in der Dokumentation.

Ich brauche eine y-Achse, die wie auf dem Bild oder auf der y-Achse eingestellt ist, damit jetzt jemand den Parameter finden kann

Ich habe auf der offiziellen Website nachgesehen, aber es gab keine Informationen darüber

50
emir

Für Chart.js 2.x lesen Sie die Antwort von andyhasit - https://stackoverflow.com/a/36954319/360067

Für Chart.js 1.x können Sie die Optionen optimieren und den Diagrammtyp erweitern, um dies zu tun

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var ctx = this.chart.ctx;
        ctx.save();
        // text alignment and color
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";
        ctx.fillStyle = this.options.scaleFontColor;
        // position
        var x = this.scale.xScalePaddingLeft * 0.4;
        var y = this.chart.height / 2;
        // change Origin
        ctx.translate(x, y);
        // rotate text
        ctx.rotate(-90 * Math.PI / 180);
        ctx.fillText(this.datasets[0].label, 0, 0);
        ctx.restore();
    }
});

nenne es so

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).LineAlt(data, {
    // make enough space on the right side of the graph
    scaleLabel: "          <%=value%>"
});

Beachten Sie den Abstand vor dem Label-Wert. Dadurch haben wir Platz, um das Label auf der y-Achse zu schreiben, ohne zu viele Chart.js-Interna zu verfälschen


Fiddle - http://jsfiddle.net/wyox23ga/


enter image description here

28
potatopeelings

In Chart.js Version 2.0 ist dies möglich:

options = {
  scales: {
    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'probability'
      }
    }]
  }
}

Siehe Dokumentation zur Achsenbeschriftung für weitere Einzelheiten.

158
andyhasit

Für x- und y-Achsen:

     options : {
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'probability'
          }
        }],
        xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'hola'
          }
        }],
      }
    }
18
no.name.added

chart.js unterstützt dies standardmäßig, überprüfen Sie den Link. chartjs

sie können die Beschriftung im options-Attribut festlegen.

das options Objekt sieht so aus.

options = {
            scales: {
                yAxes: [
                    {
                        id: 'y-axis-1',
                        display: true,
                        position: 'left',
                        ticks: {
                            callback: function(value, index, values) {
                                return value + "%";
                            }
                        },
                        scaleLabel:{
                            display: true,
                            labelString: 'Average Personal Income',
                            fontColor: "#546372"
                        }
                    }   
                ]
            }
        };
10
Rajiv

Bei mir funktioniert es so:

    options : {
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'probability'
          }
        }]
      }
    }
4
no.name.added

Erwägen Sie die Verwendung des Stils Transformation: Drehen (-90 Grad) für ein Element. Siehe http://www.w3schools.com/cssref/css3_pr_transform.asp

Beispiel: In Ihrem CSS

.verticaltext_content {
  position: relative;
  transform: rotate(-90deg);
  right:90px;   //These three positions need adjusting
  bottom:150px; //based on your actual chart size
  width:200px;
}

Fügen Sie der Y-Achsen-Skala einen Space-Fudge-Faktor hinzu, damit der Text in Ihrem Javascript Platz zum Rendern hat.

scaleLabel: "      <%=value%>"

Dann in Ihrem HTML-Code nach dem Grafik-Canvas etwas einfügen wie ...

<div class="text-center verticaltext_content">Y Axis Label</div>

Es ist nicht die eleganteste Lösung, hat aber gut funktioniert, als ich ein paar Ebenen zwischen dem HTML-Code und dem Chart-Code hatte (mit Angular-Chart und ohne den Quellcode ändern zu wollen).

1
Peter Manger