chart.jsにおいてチャートを更新し、optionsの中身を切り替えたい

chart.jsで円グラフを描写しました。
切り替えボタンクリックでオプションの中身を切り替えたいのですが、どのようなコードを書けば良いでしょうか？

javascript
1options: {
2  legend: {
3   display: true
4  }
5}

を削除し、

javascript
1 options: {
2   pieceLabel: {
3     render: function(d) { return d.label + "：" + d.percentage + "%" },
4     fontColor: '#000',
5     position: 'outside',
6     segment: true
7   }
8 }

を追加したいです。

html
1<canvas id='CircleChart'</canvas>
2<script>
3var ctx = document.getElementById("CircleChart");
4var CircleChart = new Chart(ctx, {
5  type: 'pie',
6  data: {
7    labels: ["A", "B", "C", "D", "E", "F", "G"],
8    datasets: [{
9        data: [38, 31, 21, 10, 38, 31, 21]
10    }]
11  },
12  options: {
13    legend: {
14       display: true
15    }
16  }
17});
18</script>

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

回答2件

ベストアンサー

オプションを書き換える場合、思いつくのがボタンを用意して図を更新するというのがまず思いつきました。
ボタンはonclickイベントで更新処理を書きます。

    <input type="button" value="Check" onclick='update(CircleChart)'>

何かしら値を書き換える場合は図の更新処理が必要になる場合と、いい感じにやってくれる場合とがあるのですがChart.jsの場合は自分で図を更新する必要があります。
調べてみるとchart.optionに新しいもの設定してupdate()をすると良いことがわかります。

チャートの更新 · Chart.js 日本語ドキュメント

tbunさんのソースコードを見るとchartjs-plugin-labels.jsを使おとしているようですが、古い書き方のようで試したところ動きませんでした。
新しい書き方をすると動きました。上記のことを踏まえると以下のようなコードができます。

function update(chart) {
  chart.options = {
    plugins: {
      labels: {
        render: function (d) { return d.label + "：" + d.percentage + "%" },
        fontColor: '#000',
        position: 'outside',
        segment: true
      }
    }
  }
  chart.update();
}

力尽きたのであとは以下のコードを参考に続きを作ってみてください。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1/dist/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
</head>
<body>
    <!-- <script src="js/scripts.js"></script> -->
    <canvas id='CircleChart'></canvas>
    <input type="button" value="Check" onclick='update(CircleChart)'>
    <script>
        function update(chart) {
            chart.options = {
                plugins: {
                    labels: {
                        render: function (d) { return d.label + "：" + d.percentage + "%" },
                        fontColor: '#000',
                        position: 'outside',
                        segment: true
                    }
                }
            }
            chart.update();
        }
        var ctx = document.getElementById("CircleChart");
        var CircleChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ["A", "B", "C", "D", "E", "F", "G"],
                datasets: [{
                    data: [38, 31, 21, 10, 38, 31, 21]
                }]
            },
            options: {
                legend: {
                    display: true
                }
            }
        });
    </script>
    </script>
</body>
</html>

emn178/chartjs-plugin-labels

投稿2019/11/01 16:32