現在chart.jsにてレーダーチャートを作成しています。
実装したものはこちらをご確認お願いいたします
chart.jsのドキュメント
現在、以下のようなコードを書いて、
レーダーチャートと円グラフを表示しております。
リンクを見ていただくとわかるかと思いますが、
labels: ["価格","職人の技術力","品質力","ホスピタリティー","レスポンス・スピード","保証・アフター力"]を設定しています。
こちらのラベル内の文字を改行したいのですが、うまくいきません。
具体的には
レスポンス・
スピード
保証・
アフター力
のような感じで改行させたいです。
<br>のようなhtmlタグは使えず、/nも作動しなかったです。
初心者ですので初歩的な質問でしたら申し訳ありませんが
わかる方いましたらよろしくお願いいたします。
html
<canvas id="chartTest" width="300" height="300"></canvas>
javascript
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, } } } });
まだ回答がついていません
会員登録して回答してみよう