chart.js レーダーチャート作成の際に、ラベルを改行させたい

Question

現在chart.jsにてレーダーチャートを作成しています。

実装したものはこちらをご確認お願いいたします
chart.jsのドキュメント

現在、以下のようなコードを書いて、
レーダーチャートと円グラフを表示しております。

リンクを見ていただくとわかるかと思いますが、
labels: ["価格","職人の技術力","品質力","ホスピタリティー","レスポンス・スピード","保証・アフター力"]を設定しています。
こちらのラベル内の文字を改行したいのですが、うまくいきません。

具体的には

レスポンス・
スピード

保証・
アフター力

のような感じで改行させたいです。
<br>のようなhtmlタグは使えず、/nも作動しなかったです。

初心者ですので初歩的な質問でしたら申し訳ありませんが
わかる方いましたらよろしくお願いいたします。

<canvas id="chartTest" width="300" height="300"></canvas>

          var testData = {
            labels: ["価格","職人の技術力","品質力","ホスピタリティー","レスポンス・スピード","保証・アフター力"],
            datasets: [
              {
                label: "ラベル名",
                borderColor: "rgba(241,87,130,0.9)", //線の色
                backgroundColor: "rgba(241,87,130,0.6)", //線の中を埋める色
                pointBackgroundColor: "rgba(241,87,130,1)", //ポイントの背景色
                data: [8,8.1,7.6,9.5,8.3,7],
              }
            ]
          };
          var testContext = document.getElementById("chartTest").getContext("2d");
          var test_chart = new Chart(testContext, {
            type: 'radar',
            data: testData,
            options: {
              legend: {
                display: false
              },
              scale: {
                pointLabels: {
                  fontSize: 14, //フォントサイズ
                  fontFamily: "'游ゴシック',YuGothic,NotoSans,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif",
                },
                ticks: { //http://www.chartjs.org/docs/#scales-radial-linear-scale
                  stepSize: 2, // 目盛の間隔
                  max: 10, //最大値
                  beginAtZero: true,
                }
              }
            }
          });

Answer 1

Chart.jsの11084行あたりで

ctx.fillText(pointLabels[i] ? pointLabels[i] : '', pointLabelPosition.x, pointLabelPosition.y);

としてテキストを出力しています。

testData.labelsがpointLabelsに代入されているようです。

labelsを"レスポンス・\nスピード"のようにして

if (pointLabels[i].indexOf("\n") !== -1) {
  var y = pointLabelPosition.y;
  var lineHeight = ctx.measureText("あ").width;
  pointLabels[i].split("\n").forEach(function(val){
    ctx.fillText(val ? val : '', pointLabelPosition.x, y);
    y += lineHeight;
  });
} else {
  ctx.fillText(pointLabels[i] ? pointLabels[i] : '', pointLabelPosition.x, pointLabelPosition.y);
}

のようにchart.jsを変更して利用するのでもよければできると思います。

Comments

[yukabyo]

遅くなりまして申し訳ありません。
ご回答頂いたとおりにChart.jsを変更したところ、改行することができました！
大変助かりました。この度は本当にありがとうございましたm(_ _)m

Answer 2

動的に改行を突っ込んだりしてみましたがダメでした

var test_chart = new Chart(testContext, {
            type: 'radar',
            data: testData,
            options: {
              legend: {
                display: false
              },
              scale: {
                pointLabels: {
                  fontSize: 14, //フォントサイズ
                  fontFamily: "'游ゴシック',YuGothic,NotoSans,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif",
                  //★★★ ラベル文字に・を見つけたら改行付きに置換してみたけど変わらず ★★★
                  callback: function(value) {return value.replace('・','・\n')} 
                },
                ticks: { //http://www.chartjs.org/docs/#scales-radial-linear-scale
                  stepSize: 2, // 目盛の間隔
                  max: 10, //最大値
                  beginAtZero: true,
                }
              }
            }
          });

ＱＡサイトのいくつかで「ラベルで改行できないの？」という質問を見つけましたが、解決に至っていませんでした

githubにて議論され修正もされたようですが（？）、私の英語理解力ではどうなったのかわからず・・・
This PR allows for multi-line labels, as per Slack discussion.. #2704
※確かに Chart.js のセットの中の sample に multiline-labels.html が入っていますが、まだ解析しきれていません、、、

解決に至るような回答でなく恐縮ですが、ご参考まで

Comments

[yukabyo]

遅くなりまして申し訳ありません。
今回は sha 様にご回答いただいた方法で無事解決することができましたm(_ _)m
いろいろと試していただいたようで、本当にありがとうございました！

Answer 3

あまりきちんと調べた内容ではありませんが・・・

リファレンスのLegend Label Configurationの項を見る限り2行に渡るテキストを表示することを直接サポートしているかのような記述は見当たりませんでした。

次にcharjsは最終的にはcanvasへ描画しているはずなのでソースからそれらしいところを探すと、以下のように複数行で描画しているような雰囲気のコードがあったのですが・・・

if (i.isArray(e))
  for (var n = 0, a = 0; n < e.length; ++n)
    l.fillText('' + e[n], 0, a), a += 1.5 * v.size;
  else
    l.fillText(e, 0, 0);

あてずっぽでlabelsの特定の要素を配列にしてみたのですが

labels: ["価格", ["職人の","技術力"],...],
...

職人の,技術力と表示されただけでした。深く調べれば方法が見つかりそうな気もしますが適当に見たぐらいではやはりダメですね・・・

オプションの中にgenerateLabels(凡例の生成を自前でやる関数を指定する)仕組みが用意されているのですがこの関数でレンダリングを直接できるのかレンダリングへ渡すオプションを生成することしかできないのか詳しく見ないと自分にはわかりそうにありませんでした。

ところでchart.jsのplugin(extension?)として多数のライブラリーがあるようです。chart.jsのドキュメントの末尾に沢山並んでますね。そうしたものにテキストの改行が行えるようなレーダーチャートがないかを調べてみてはいかがでしょう？

あまり役にたたないコメントでスミマセン

Comments

[yukabyo]

遅くなりまして申し訳ありません。
今回は sha 様にご回答いただいた方法で無事解決することができましたm(_ _)m
また、いろいろと試していただいたようで、感謝致します。ありがとうございました！

[KSwordOfHaste]

自分がソースを見てしまった点、ちょっとどうなのだろうと思いましたが、shaさんの回答をみるにつけ、jsのライブラリーの場合は結構あることなのかなぁと思ったりしてちょっと面白く感じましたｗ；

[sha]

javascriptのライブラリはソースを見て学べる部分が多いのでよく見ています。変更となるとライセンスの問題もあるのでできる場合とできない場合があります。ライセンスについては詳しくありませんがChart.jsはMITライセンスでしたので変更しての利用が可能かと思いました。

[KSwordOfHaste]

>ソースをみて学べる
興味のあるものは参考になるので自分も中身をよくみて参考にします。
ライセンスについてはアマチュアなので自分はあまり気にしませんが、納入対象のソフトでは改変での条件を把握しておいた方がいいのでしょうね。MITならゆるいので確かに安心と言えると思いますが、それでも当然ながら本体から改変しているという点自体に注意や管理は必要なのかなと想像します。