chart.jsでグラフにカーソルを合わせると色が消える

起こっている問題

いままでサーバでレンダリングしたものをhtmで表示させていたのですが、javascriptで表示させてみようと思い、chart.jsをhttps://tr.you84815.space/chartjs/index.htmlやhttps://nagix.hatenablog.com/entry/2018/11/26/183950を参考に以下のHTMLを書きました。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    　<title>グラフ</title>
7    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
8    <script type="text/javascript"
9        src="https://github.com/nagix/chartjs-plugin-colorschemes/releases/download/v0.2.0/chartjs-plugin-colorschemes.min.js"></script>
10</head>
11
12<body>
13    <h1>円グラフ</h1>
14    <canvas id="myPieChart"></canvas>
15
16    <script type="text/javascript">
17        var ctx = document.getElementById('myPieChart').getContext('2d');
18        var chart6 = new Chart(ctx, {
19            type: 'pie',
20            data: {
21                labels: ['100%', '90%', '80%', '70%', '60%', '50%', '40%', '30%', '20%', '10%', '0%'],
22                datasets: [{
23                    label: 'Dataset',
24                    data: [43, 40, 32, 29, 15, 13, 10, 8, 5, 3, 2]
25                }]
26            },
27            options: {
28                aspectRatio: 1.5,
29                plugins: {
30                    colorschemes: {
31                        scheme: 'brewer.RdYlBu11'
32                    }
33                }
34            }
35        });
36    </script>
37</body>
38
39</html>

これをブラウザで確認したところ、マウスカーソルをグラフに合わせると色が消えます。
参考にしたサイトで記載されているグラフでは起きない現象なのでコードのどこかが悪いのではないかと思っています。

詳しい方がいらっしゃいましたらご教授よろしくおねがいします。

試してみたこと

https://tr.you84815.space/chartjs/general/interactions.htmlを参考にして

html
1options: {
2    aspectRatio: 1.5,
3    hover: {
4        intersect: false
5    },
6    plugins: {
7        colorschemes: {
8            scheme: 'brewer.RdYBu11'
9        }
10    }
11}

に変更してみましたが動作は変わりませんでした。

環境

Manjaro Linux x86_64
Vivaldi 3.5.2115.87
(Chromium 87.0.4280.88 Arch Linuxでも確認)

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

回答1件

ベストアンサー

GitHubのcolorschemesのReleaseページを見ると、V0.3.0のところに以下の記述が見つかります。

Fix the hover color issue in Chart.js 2.7.2 or earlier

Releases · nagix/chartjs-plugin-colorschemes · GitHub

ということで、あなたがChart.jsの2.7.2とcolorschemesのv0.2.0を組み合わせて使っていることが原因です。

試しに、colorschemesのほうだけ最新バージョン(v0.4.0)に変えてみたら、ホバー時の問題は解消しました。colorschemesは現状のまま、Chart.jsを最新バージョン(2.9.4)のCDNに変更しても、問題ありませんでした。もちろん両方とも最新バージョンにしても問題ありません。

投稿2021/01/17 06:27

編集2021/01/17 06:42