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

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

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

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

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

HTML

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

Q&A

解決済

1回答

2408閲覧

Chart.jsのグラフを修正できるようにしたい

退会済みユーザー

退会済みユーザー

総合スコア0

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2021/03/04 00:30

前提・実現したいこと

お世話になっております。
Chart.jsを利用し、円グラフや折れ線グラフを作りたいと思っています。
色々なサイトを確認し、以下ソースのようにまとめました。

やりたいこと

  • 円グラフの場合に、項目名とパーセンテージを表示したい

 chart.jsの円グラフの中に値を表示する
上記のように、円グラフの場合は「ラベル名」と「パーセント」を表示したいです。
参考にHTMLファイル、jsファイルを作成しましたが、
コメントアウトした部分を表示にすると、グラフ自体が消えてしまいます。

  • myChart.jsをHeadで読み込んでも動作するようにしたい

 BodyのScriptに、myChartCreate(データ); みたいに記載したら
好きなグラフを作れるようにしたいです。

できたらやりたい事

 

  • 円グラフ、折れ線グラフと切り替えたい

js

1 //円グラフを作成する場合の引数 2 GraphKind="pie";//円グラフ 3 myLabel=["","",""]; 4 myData=[70,20,10]; 5 myColor=["pink","blue","gray"]; 6 myChartCreate(pie,myLabel,myData,myColor); 

js

1 //折れ線を作成する場合の引数 2 GraphKind="line";//折れ線グラフ 3 myLabel=["","",""]; 4 myData=[70,20,10]; 5 myColor=["pink"];//borderColorです 6 myChartCreate(pie,myLabel,myData,myColor); 

↑折れ線グラフの項目は1~3本と可変です。if文で値が存在するか確認すればいける…?

該当のソースコード

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <script src="js/Chart.js"></script> 5 <script src="js/chartjs-plugin-datalabels.js"></script> 6 </head> 7 <body> 8 <script> 9 var chartCanvas = document.createElement('canvas'); 10 chartCanvas.id = 'ChartCanvas'; 11 document.body.appendChild(chartCanvas); 12 13 //context取得 14 var context = document.getElementById('ChartCanvas').getContext('2d'); 15 </script> 16 <script src="js/myChart.js"></script> 17 </body> 18</html>

js

1(function() { 2 var pink = 'rgb(255, 99, 132)'; 3 var blue = 'rgb(54, 162, 235)'; 4 var gray = 'rgb(15, 15, 15)'; 5 6 7 var data = { 8 labels: ["テストA", "テストB", "テストC"], 9 datasets: [{ 10 data: [70, 20,10], 11 backgroundColor: [pink,blue, gray], 12 }], 13 }; 14 15 // グラフオプション 16 var options = { 17 // 凡例を表示しない 18 legend: { display: false }, 19 // 自動サイズ変更をしない 20 responsive: false, 21 // タイトル 22 title: { 23 display: true, 24 fontSize: 16, 25 text: 'テストデータ', 26 }, 27 // マウスオーバー時に情報を表示しない 28 // tooltips: { enabled: false }, 29 }; 30 31//↓コメントから戻すと、上手く動作しなくなる 32 var plugins={ 33 datalabels: { 34 color: '#000', 35 font: { 36 weight: 'bold', 37 size: 20, 38 } 39// formatter: (value, ctx) => { 40// return value + '%'; 41// }, 42 } 43} 44//↑ 45 46 47 var objChart = new Chart(context, { 48 type: 'pie', 49 data: data, 50 options: options, 51 plugins:plugins, 52 }); 53})();

試したこと

// formatter: (value, ctx) => {
// return value + '%';
// },
この部分のコメントを戻すと、グラフ自体が表示できないというところまでは分かりました。

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

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

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

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

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

guest

回答1

0

ベストアンサー

とりあえず、前半の「円グラフの場合に、項目名とパーセンテージを表示したい」についてだけですが、
・ formatterのところのコメントを戻すと円グラフが表示されなくなるのは、formatterの前にカンマがないからだと思われます。
・pluginsは、下記のようにoptionsの中にいれないと、うまく反映されないようです。
(pluginsをoptionsの中に入れる場合、一番最後のplugins:pluginsは削除)

diff

1(略) 2 // グラフオプション 3 var options = { 4 // 凡例を表示しない 5 legend: { display: false }, 6 // 自動サイズ変更をしない 7 responsive: false, 8 // タイトル 9 title: { 10 display: true, 11 fontSize: 16, 12 text: 'テストデータ', 13 }, 14 // マウスオーバー時に情報を表示しない 15 // tooltips: { enabled: false }, 16+ plugins: { 17+ datalabels: { 18+ 19+ color: "#000", 20+ font: { 21+ weight: "bold", 22+ size: 20, 23+ }, //カンマつける 24+ formatter: (value, ctx) => { 25+ return value+'%'; 26+ }, 27+ }, 28+ }, 29 }; 30 31 32-//↓コメントから戻すと、上手く動作しなくなる 33- var plugins={ 34- datalabels: { 35- color: '#000', 36- font: { 37- weight: 'bold', 38- size: 20, 39- } 40-// formatter: (value, ctx) => { 41-// return value + '%'; 42-// }, 43- } 44-} 45-//↑ 46 47 48 var objChart = new Chart(context, { 49 type: 'pie', 50 data: data, 51 options: options, 52- plugins:plugins, //pluginsはオプションの中に含めるため削除 53 }); 54})();

投稿2021/03/04 02:35

編集2021/03/04 02:36
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2021/03/04 09:33

qnoir様、回答ありがとうございます。 >カンマがない {}とか,とか何度か確認したのですが、抜けていたようです。 ありがとうございます! >pluginsは、下記のようにoptionsの中にいれないと、うまく反映されない {}の数や,の数など、法則性が良く分かっておらず 何が足りないのかすぐに分からず困ったため分離しました。 パーセントも無事表示できるようになりました、ありがとうございます! 今後のためにもう少し見やすい方法があれば良いのですが…。 グラフを動的に切り替える方法ですが、 似たような質問がありました!これで出来そうです。 chart.jsでグラフのデータを動的に切り替えるにはどのようにすれば良いでしょうか? https://teratail.com/questions/216345
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問