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

前提・実現したいこと

お世話になっております。
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 + '%';
// },
この部分のコメントを戻すと、グラフ自体が表示できないというところまでは分かりました。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず、前半の「円グラフの場合に、項目名とパーセンテージを表示したい」についてだけですが、
・ 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

行動規範の内容に同意します