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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

Q&A

解決済

3回答

20220閲覧

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

yukabyo

総合スコア135

JavaScript

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

HTML

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

0グッド

3クリップ

投稿2017/04/12 06:13

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

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

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

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

具体的には

レスポンス・
スピード

保証・
アフター力

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

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

html

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

javascript

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

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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/12 09:53

sha

総合スコア141

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukabyo

2017/04/12 23:51

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

0

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

javascript

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

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

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

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

投稿2017/04/12 09:34

takito

総合スコア3111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukabyo

2017/04/12 23:53

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

0

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

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

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

javascript

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

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

javascript

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

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

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

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

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

投稿2017/04/12 09:24

KSwordOfHaste

総合スコア18392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukabyo

2017/04/12 23:55

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

2017/04/13 00:04 編集

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

2017/04/13 01:09

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

2017/04/13 01:36 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問