chart.jsの「pieceLabel」オプションが効かない

chart.jsを使ってグラフを表示させたいです。
Chart PieceLabelのライブラリを追加しているのですが、
グラフ内のテキストサイズやカラーが変更されません。

「chartjs-plugin-labels.js」に関しては下記から拝借させて頂いております。
https://github.com/emn178/chartjs-plugin-labels

確認ブラウザはmacのChromeです。

<!doctype html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>chartjs-plugin-labels</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
  <script type="text/javascript" src="chartjs-plugin-labels.js"></script>
</head>

<body>
  <canvas id="myDoughnutChart"></canvas>
  <script>
    //円グラフ（ドーナッツ型）
    var ctx = document.getElementById("myDoughnutChart");
    var myDoughnutChart = new Chart(ctx, {
      //グラフの種類
      type: 'doughnut',
      //データの設定
      data: {
        //データ項目のラベル
        labels: ["Red", "Green", "Yellow"],
        //データセット
        datasets: [{
          //背景色
          backgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56"
          ],
          //グラフのデータ
          data: [300, 50, 100]
        }]
      },
      options: {
　　　　　//下記が動作しません
        pieceLabel: {
          render: 'percentage',
          position: 'outside',
          fontSize: 20,
          fontColor: '#FF0000',
        }
      }
    });
  </script>
</body>

</html>

ご教示お願いいたします。

m.ts10806

2019/06/20 02:36

chart.js本体はCDNだからいいとして、chartjs-plugin-labels.js はどこから取得したものを使っていますか？リンクをご提示ください

hayakawatakuma

2019/06/20 02:39

早速のご確認ありがとうございます。「chartjs-plugin-labels.js」に関しては下記から拝借させて頂いております。 https://github.com/emn178/chartjs-plugin-labels

m.ts10806

2019/06/20 02:40

質問本文に追記いただければと

hayakawatakuma

2019/06/20 02:43

失礼いたしました！本文に追記いたしました。

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

回答1件

ベストアンサー

提示のプラグインのUsageやサンプルデモページと設定の仕方が違うように思いますが、まずはUsageやDemoの通りにしてみては？

私はその通り指定したらできました。

コメント部分を転記：
変更履歴見てみると
v1.1.0のfixでごそっと設定が変わってます。
これが2018年8月21日のことらしいので、参考にされた記事や質問はそれ以前のpieceLabelという設定があったころに書かれたものということになります。

変更履歴まで追うのはなかなか難しいと思いますが、
基本的には公式に掲示されているマニュアルを真として対応しましょう。
おおよそ同等の機能は実現可能なはずです。

投稿2019/06/20 03:01

編集2019/06/20 04:09

m.ts10806

総合スコア80850

hayakawatakuma

2019/06/20 03:22

ありがとうございます。もちろんサンプルと同様に記載すれば動くのですが、下記記事や同じようなご質問をされている方の回答などを試してもダメで、腑に落ちなかったので。。。。。 https://blog.capilano-fw.com/?p=586 https://teratail.com/questions/93985

m.ts10806

2019/06/20 03:27

1年の間に仕様が変わったとかはあるかもしれませんね。変更履歴見てみると https://github.com/emn178/chartjs-plugin-labels/commits/master/src v1.1.0のfixでごそっと設定が変わってます https://github.com/emn178/chartjs-plugin-labels/commit/cf62971e70631468a9e9c5d3f99d83574a84e375#diff-25d902c24283ab8cfbac54dfa101ad31

m.ts10806

2019/06/20 03:31

つまり、pieceLabelという指定を使いたければそれ以前のバージョンを使う必要があるということですね。これだけごそっと変えるなら旧指定でオプション投げられたときに警告だしてあげればいいのに・・・。互換性が全くないので余計に警告は欲しいですね。個人で作られたもののようなので仕方がないかもしれませんが、ちと不親切と言えるかもしれません。

hayakawatakuma

2019/06/20 04:16

ご回答ありがとうございます！最新のverで色々といじってみたら思った通りの挙動となりました！仰る通り、verの違いにより記述方法が異なっていたことが主な原因でした。

m.ts10806

2019/06/20 04:33

解決されたようで何よりです。

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