質問編集履歴

再調査していくなかで、変更しました

2020/10/17 12:26

投稿

退会済みユーザー

スコア0

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -4,49 +4,38 @@
 グラフにjQueryの内容が反映されない。
 --------------------------
-SQLDataSourceの結果をStackedBar100を使って表示しています。
+SQLDataSourceの結果をStackedBar100で表現し、URLで遷移できるようにしたいです。
+これをchart.jsを使って実現しようとしています。
+調べてみると、
-インターネットの例を見よう見まねでやると、うまくいきます。
+chart.jsで実現するためには、canvasタグで囲まないといけないようなので、
-ネットの例では、使うデータはSQLDataSourceから呼び出されたものではなく、datasetsに[12, 19, 3, 5, 2, 3]といった形で定義されています。またhtmlのタグではcanvasタグを使っていました。
-（<canvas id="Chart1"></canvas>）
+$("#Chart1").wrapAll($("<canvas id=" + "Chart1"+ "></canvas>"));
+と記述しました。
-そこで、私が作っているプログラムでもcanvasで囲むべく、
-$("#Chart1").prepend($("<canvas></canvas>"));
-を書いたのですが、どうやら違うようでした。
+しかし、うまくいきませんでした。
 私の知識不足ということもあり、何が原因かわからない状態です。
 原因をご教授いただけないでしょうか。
 ```
 <body>
-<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1/dist/Chart.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 <script type="text/javascript">
             $(document).ready(function () {
-$("#Chart1").prepend($("<canvas></canvas>"));
+$("#Chart1").wrapAll($("<canvas id=" + "Chart1"+ "></canvas>"));
- var ctx = document.getElementById("myChart").getContext('2d');
+  const ctx = document.getElementById('Chart1').getContext('2d');
-                var myChart = new Chart(ctx, {
+                const chart = new Chart(ctx, {
                     type: 'stackedbar100',
-                    options: {
-                        scales: {
-                            yAxes: [{
-                                ticks: {
-                                    beginAtZero: true
-                                }
-                            }]
+ });
-                        },
+                document.getElementById('Chart1').addEventListener('click', e => {
-                        events: ['click'],
+                    const elements = chart.getElementAtEvent(e);
-                        onHover: function (e, el) {
-                            if (!el || el.length === 0) return;
+                    if (elements.length) {
-                            console.log('onHover : label ' + el[0]._model.label);
+                        alert(`${elements[0]._index}: ${elements[0]._model.label}`);
-                        },
-                        onClick: function (e, el) {
-                            if (!el || el.length === 0) return;
-                            console.log('onClick : label ' + el[0]._model.label);
-                        }
                     }
-                });
+                });
+});
 </script>