質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • JavaScript

    17461questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9524questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

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

解決済

回答 3

投稿

  • 評価
  • クリップ 2
  • VIEW 4,326

yukabyo

score 119

現在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,
                }
              }
            }
          });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

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を変更して利用するのでもよければできると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/13 08:51

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

    キャンセル

+1

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

リファレンスの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のドキュメントの末尾に沢山並んでますね。そうしたものにテキストの改行が行えるようなレーダーチャートがないかを調べてみてはいかがでしょう?

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/13 08:55

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

    キャンセル

  • 2017/04/13 09:02 編集

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

    キャンセル

  • 2017/04/13 10:09

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

    キャンセル

  • 2017/04/13 10:35 編集

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

    キャンセル

+1

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/13 08:53

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17461questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9524questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。