wake-up-neo.com

Entfernen Sie die Beschriftung / den Text der x-Achse in chart.js

Wie verstecke ich die Beschriftung/den Text auf der x-Achse, die/der in chart.js angezeigt wird?

Einstellung scaleShowLabels:false entfernt nur die Beschriftungen der y-Achse.

<script>
    var options = {
        scaleFontColor: "#fa0",
        datasetStrokeWidth: 1,
        scaleShowLabels : false,
        animation : false,
        bezierCurve : true,
        scaleStartValue: 0,
    };
    var lineChartData = {
        labels : ["1","2","3","4","5","6","7"],
        datasets : [
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [1,3,0,0,6,2,10]
            }
        ]

    }

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);

</script>
51
Sonny G

UPDATE chart.js 2.1 und höher

var chart = new Chart(ctx, {
    ...
    options:{
        scales:{
            xAxes: [{
                display: false //this will remove all the x-axis grid lines
            }]
        }
    }
});


var chart = new Chart(ctx, {
    ...
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    display: false //this will remove only the label
                }
            }]
        }
    }
});

Referenz: chart.js documentation

Alte Antwort (geschrieben als die aktuelle Version 1.0 Beta war) nur als Referenz:

Um zu vermeiden, dass Beschriftungen in chart.js Angezeigt werden, müssen Sie scaleShowLabels : false Festlegen und die Übergabe von labels vermeiden:

<script>
    var options = {
        ...
        scaleShowLabels : false
    };
    var lineChartData = {
        //COMMENT THIS LINE TO AVOID DISPLAYING THE LABELS
        //labels : ["1","2","3","4","5","6","7"],
        ... 
    }
    ...
</script>
95
giammin

(Diese Frage ist ein Duplikat von Ist es in chart.js möglich, die Beschriftung/den Text der X-Achse des Balkendiagramms auszublenden, wenn Sie vom Mobiltelefon aus zugreifen? ) Sie haben die Option 2.1.4 (und möglicherweise) hinzugefügt ein bisschen früher) hat es

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    display: false
                }
            }]
        }
    }
}
15
Kapytanhook
var lineChartData = {
    labels: ["", "", "", "", "", "", ""] // To hide horizontal labels
        ,datasets : [
                {
                        label: "My First dataset",
                        fillColor : "rgba(220,220,220,0.2)",
                        strokeColor : "rgba(220,220,220,1)",
                        pointColor : "rgba(220,220,220,1)",
                        pointStrokeColor : "#fff",
                        pointHighlightFill : "#fff",
                        pointHighlightStroke : "rgba(220,220,220,1)",
                        
                        data: [28, 48, 40, 19, 86, 27, 90]
                }
        ]
}



window.onload = function(){
        var options = {
                scaleShowLabels : false // to hide vertical lables
        };
        var ctx = document.getElementById("canvas1").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, options);

}
11
baligena

Konfrontiert dieses Problem des Entfernens der Beschriftungen in Chartjs jetzt. Sieht aus wie die Dokumentation verbessert wird. http://www.chartjs.org/docs/#getting-started-global-chart-configuration

Chart.defaults.global.legend.display = false;

diese globalen Einstellungen verhindern, dass Legenden in allen Diagrammen angezeigt werden. Da dies für mich genug war, habe ich es benutzt. Ich bin mir nicht sicher, wie ich Legenden für einzelne Charts vermeiden soll.

Inspiriert von Christuttys Antwort ist hier eine Lösung, die die Quelle modifiziert, aber nicht gründlich getestet wurde. Ich hatte noch keine Probleme.

Fügen Sie im Abschnitt "Standardeinstellungen" diese Zeile um Zeile 71 hinzu:

// Boolean - Omit x-axis labels
omitXLabels: true,

Fügen Sie dann in der Zeile 2215 Folgendes in die buildScale-Methode ein:

//if omitting x labels, replace labels with empty strings           
if(Chart.defaults.global.omitXLabels){
    var newLabels=[];
    for(var i=0;i<labels.length;i++){
        newLabels.Push('');
    }
    labels=newLabels;
}

Dadurch bleiben auch die QuickInfos erhalten.

6
MichaelG

Die einfachste Lösung ist:

scaleFontSize: 0

siehe das chart.js Dokument

lachende Frage

4
叶碧颖

Wenn Sie möchten, dass die Beschriftungen für die QuickInfo beibehalten, aber nicht unter den Balken angezeigt werden, ist der folgende Hack möglicherweise hilfreich. Ich habe diese Änderung für die Verwendung in einer privaten Intranet-Anwendung vorgenommen und sie nicht auf Effizienz oder Nebenwirkungen getestet, aber sie hat das getan, was ich brauchte.

Fügen Sie ungefähr in Zeile 71 in chart.js eine Eigenschaft hinzu, um die Balkenbeschriftungen auszublenden:

// Boolean - Whether to show x-axis labels
barShowLabels: true,

Verwenden Sie diese Eigenschaft etwa in Zeile 1500, um das Ändern von this.endPoint zu unterdrücken (anscheinend werden andere Teile des Berechnungscodes benötigt, da Teile des Diagramms verschwunden sind oder falsch gerendert wurden, wenn ich mehr als diese Zeile deaktiviert habe).

if (this.xLabelRotation > 0) {
    if (this.ctx.barShowLabels) {
        this.endPoint -= Math.sin(toRadians(this.xLabelRotation)) * originalLabelWidth + 3;
    } else {
        // don't change this.endPoint
    }
}

Verwenden Sie gegen Zeile 1644 die Eigenschaft, um das Rendern der Beschriftung zu unterdrücken:

if (ctx.barShowLabels) {    
    ctx.fillText(label, 0, 0);
}

Ich würde diese Änderung gerne an der Quelle von Chart.js vornehmen, bin aber mit git nicht so vertraut und habe nicht die Zeit, sie rigoros zu testen. Deshalb würde ich lieber vermeiden, irgendetwas zu beschädigen.

3
christutty