webentwicklung-frage-antwort-db.com.de

Chart.js und lange Etiketten

Ich verwende Chart.js, um ein Radardiagramm anzuzeigen. Mein Problem ist, dass einige Beschriftungen sehr lang sind: Das Diagramm kann nicht angezeigt werden oder es erscheint sehr klein.

Gibt es eine Möglichkeit, Linien zu brechen oder den Etiketten eine maximale Breite zuzuweisen?

Danke für deine Hilfe!

20
user2857678

Für Chart.js 2.0+ können Sie ein Array als Beschriftung verwenden:

Zitieren der DOCs: "Verwendung: Wenn eine Beschriftung ein Array und keine Zeichenfolge ist, d.

var data = {
   labels: [["My", "long", "long", "long", "label"], "another label",...],
   ...
}
36
Arivan Bastos

Mit ChartJS 2.1.6 und mit @ArivanBastos Antwort

Übergeben Sie einfach Ihr langes Label an die folgende Funktion. Das Label wird in einer Array-Form zurückgegeben, wobei jedes Element Ihre zugewiesene maxWidth berücksichtigt. 

/* takes a string phrase and breaks it into separate phrases 
   no bigger than 'maxwidth', breaks are made at complete words.*/

function formatLabel(str, maxwidth){
    var sections = [];
    var words = str.split(" ");
    var temp = "";

    words.forEach(function(item, index){
        if(temp.length > 0)
        {
            var concat = temp + ' ' + item;

            if(concat.length > maxwidth){
                sections.Push(temp);
                temp = "";
            }
            else{
                if(index == (words.length-1))
                {
                    sections.Push(concat);
                    return;
                }
                else{
                    temp = concat;
                    return;
                }
            }
        }

        if(index == (words.length-1))
        {
            sections.Push(item);
            return;
        }

        if(item.length < maxwidth) {
            temp = item;
        }
        else {
            sections.Push(item);
        }

    });

    return sections;
}
15
Fermin Arellano

Sie können eine JavaScript-Funktion schreiben, um das Label anzupassen: // Interpolated JS string - can access value scaleLabel: "<%=value%>",

Siehe http://www.chartjs.org/docs/#getting-started-global-chart-configuration

2
David Blurton

Leider gibt es bis jetzt (5. April 2016) keine Lösung dafür . Chart.js enthält mehrere Probleme, mit denen das Problem gelöst werden kann:

Dies ist eine Problemumgehung: Entferne die X-Achsenbeschriftung/den Text in chart.js

1
Chocksmith

Es scheint, dass Sie tatsächlich über Datenbeschriftungen sprechen und nicht über die Skalenbeschriftungen. In diesem Fall möchten Sie die Option pointLabelFontSize verwenden. Siehe unteres Beispiel:

var ctx = $("#myChart").get(0).getContext("2d");

var data = {
  labels: ["Eating", "Sleeping", "Coding"],
  datasets: [
    {
        label: "First",
        strokeColor: "#f00",
        pointColor: "#f00",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "#ccc",
        data: [45, 59, 90]
    },
    {
        label: "Second",
        strokeColor: "#00f",
        pointColor: "#00f",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "#ccc",
        data: [68, 48, 40]
    }
  ]
};

// This is the important part
var options = {
  pointLabelFontSize : 20
};

var myRadarChart = new Chart(ctx).Radar(data, options);

Schließlich möchten Sie vielleicht mit den Abmessungen Ihres <canvas> -Elements spielen, da ich manchmal festgestellt habe, dass das Radar-Diagramm mehr Höhe bietet, um die automatische Skalierung von allem zu unterstützen.

0
John Kacz