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

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

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

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

HTML

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

Q&A

解決済

1回答

3390閲覧

chart.jsで縦軸ラベルが表示されない

susumu_0414

総合スコア37

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2018/11/02 06:34

2軸で棒グラフと折れ線グラフを表示するサンプルソースに、
軸ラベルを表示するように追加しましたが、軸ラベルが表示されません。
(追加部分は下記ソースのコメントの //追加部分 だけです)

グラフは問題なく表示されます。
どうすればラベルが表示されるようになりますか。
よろしくお願いします。

【Javascript】 window.onload = function() { var complexChartOption = { responsive: true, scales: { yAxes: [{ id: "y-axis-1", type: "linear", position: "left", scalelabel: { //追加部分 display: true, //追加部分 labelString: '縦軸ラベル1', //追加部分 }, //追加部分 ticks: { max: 100, min: 0, stepSize: 10 }, }, { id: "y-axis-2", type: "linear", position: "right", scalelabel: { //追加部分 display: true, //追加部分 labelString: '縦軸ラベル2', //追加部分 }, //追加部分 ticks: { max: 100, min: 0, stepSize: 10 }, } ], } }; var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], datasets: [ { type: 'bar', label: 'apples', data: [12, 19, 3, 17, 6, 3, 7], backgroundColor: "rgba(153,255,51,0.4)", yAxisID: "y-axis-1", }, { type:'line', label: 'oranges', data: [2, 29, 5, 5, 2, 3, 10], backgroundColor: "rgba(255,153,0,0.4)", yAxisID: "y-axis-2", } ] }, options: complexChartOption }); };
【HTML】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> <script src="test4.js" type="text/javascript"></script> </head> <body> <div> <canvas id="myChart"></canvas> </div> </body> </html>

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

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

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

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

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

m.ts10806

2018/11/02 06:39

コード内にプログラミング言語名を書くのではなく、コードブロック冒頭の ``` を ```HTMLのようにしていただけると。再現確認の際にこちらの手で除くという手間が発生しますし、実際のコードにはない記述ですよね。
susumu_0414

2018/11/02 06:56

ご指摘ありがとうございます。そこに記載すればよかったのですね。以後気を付けたいと思います。
guest

回答1

0

ベストアンサー

scalelabel ではなく、scaleLabel です。
https://misc.0o0o.org/chartjs-doc-ja/axes/labelling.html

投稿2018/11/02 06:48

x_x

総合スコア13749

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

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

susumu_0414

2018/11/02 07:03

ありがとうございます! 表示されました! 大文字・小文字、識別されるんですね。初心者ですいません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問