web-dev-qa-db-ja.com

Chart.jsと長いラベル

Chart.jsを使用してレーダーチャートを表示します。私の問題は、一部のラベルが非常に長いことです。チャートを表示できないか、非常に小さいように見えます。

だから、行を分割する方法やラベルに最大幅を割り当てる方法はありますか？

ご協力ありがとうございました！

chartschart.jsradar-chart
22
user2857678

Chart.js 2.0以降では、ラベルとして配列を使用できます。

DOCの引用："使用法：ラベルが文字列ではなく配列である場合、つまり[[" June "、" 2015 "]、" July "]の場合、各要素は別の行として扱われます。

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

ChartJS 2.1.6で@ArivanBastosを使用 answer

長いラベルを次の関数に渡すだけで、ラベルが配列形式で返され、各要素は割り当てられたmaxWidthを尊重します。

/* 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;
}
20
Fermin Arellano

ラベルをカスタマイズするjavascript関数を作成できます：// Interpolated JS string - can access value scaleLabel: "<%=value%>",

http://www.chartjs.org/docs/#getting-started-global-chart-configuration を参照してください

2
David Blurton

残念ながら、これまでのところこれに対する解決策はありません（2016年4月5日）。 Chart.jsには、これに対処するための複数の問題があります。

これは回避策です： chart.jsのx軸ラベル/テキストを削除

1
Chocksmith

実際にはスケールラベルではなく、データラベルについて話しているようです。この場合、pointLabelFontSizeオプションを使用する必要があります。以下の例を参照してください。

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

最後に、レーダーチャートの高さを大きくすると、すべての自動スケーリングに役立つことがあるので、<canvas>要素の寸法を試してみることをお勧めします。

0
John Kacz