質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4261閲覧

Chart.jsのグラフ再描画時の挙動を制御する方法について

spbob

総合スコア9

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/05/14 11:55

編集2020/05/15 07:31

chart.jsを使ってエリアごとのデータのグラフを作成しています。
データはAPIから取得しています。
グラフの動きの仕様として、以下があります。
・カレンダー(datepickerUI)を使って日付をクリックすると、グラフが切り替わる
・期間(日・週・月)をクリックすると、グラフが切り替わる

chart.jsでは、一度グラフを描画した後に、リロード以外で同じcanvasタグにグラフを再描画すると、
再描画前のグラフが表示される事象があり、それを制御するのに、

.destroy();

を使用すると解消されるとのことで、グラフの切り替えのタイミングで使用したのですが、うまく制御することができませんでした。

.destroy()はどのタイミングで呼べば制御できるでしょうか。
教えていただけると幸いです。

以下、実装済みのJavascriptです。

javascript

1function calendar() { 2 // カレンダー 3 $('#datepicker') 4 .datepicker({ 5 dateFormat: 'yy/mm/dd', 6 buttonText: '日付選択', 7 showOn: 'button', 8 beforeShow: function (input, inst) { 9 var calendar = inst.dpDiv; 10 setTimeout(function () { 11 calendar.position({ 12 my: 'right top', 13 at: 'right bottom', 14 of: input 15 }); 16 }, 1); 17 }, 18 onSelect: function (dateText, inst) { 19 console.log('onSelect', dateText, inst); 20 updateCharts(); 21 } 22 }) 23 .datepicker('setDate', new Date()); 24} 25 26// グラフの描画 27function drawChart(areaData, canvasId) { 28 var ctx = $(canvasId)[0].getContext('2d'); 29 var myChart = new Chart(ctx, { 30 type: 'line', 31 data: areaData, 32 options: { 33 legend: { 34 position: 'bottom', // タイトルでの position と同じ 35 labels: { 36 fontSize: 12, // ┐ 37 fontColor: 'rgba(72, 139, 199, 1)' // │タイトルでの fontSize ~ fontFamily と同じ 38 } 39 }, 40 scales: { //軸の設定 41 xAxes: [ // X軸設定 42 { 43 scaleLabel: { // 軸ラベル 44 display: true, // 表示設定 45 fontColor: 'rgba(72, 139, 199, 1)', // 文字の色 46 fontSize: 12 // フォントサイズ 47 }, 48 gridLines: { // 補助線 49 color: 'rgba(72, 139, 199, 1)', // 補助線の色 50 }, 51 ticks: { // 目盛り 52 maxTicksLimit: 7, 53 fontColor: 'rgba(72, 139, 199, 1)', // 目盛りの色 54 fontSize: 12 // フォントサイズ 55 } 56 } 57 ], 58 yAxes: [ // Y軸設定 59 { 60 scaleLabel: { // 軸ラベル 61 display: true, // 表示の有無 62 fontFamily: 'sans-serif', 63 fontColor: 'rgba(72, 139, 199, 1)', // 文字の色 64 fontFamily: 'sans-serif', 65 fontSize: 12 // フォントサイズ 66 }, 67 gridLines: { // 補助線 68 color: 'rgba(72, 139, 199, 1)', // 補助線の色 69 zeroLineColor: 'rgba(72, 139, 199, 1)' // y=0(X軸の色) 70 }, 71 ticks: { // 目盛り 72 min: 0, // 最小値 73 //max: 30, // 最大値 74 stepSize: 5, // 軸間隔 75 fontColor: 'rgba(72, 139, 199, 1)', // 目盛りの色 76 fontSize: 12 // フォントサイズ 77 } 78 } 79 ] 80 }, 81 plugins: { 82 colorschemes: { 83 scheme: 'brewer.Paired12', 84 fillAlpha: 0.2 85 } 86 } 87 } 88 }); 89} 90//データ 91function updateCharts() { 92 // 日付取得 93 var date = $('#datepicker').val(); 94 95 // activeな期間取得 96 var type = $('.active').attr('data-value'); 97 98 // URL を作る(今回は単純なので単に連結する) 99 var url = 'https://example.com/data' + 100 '?date=' + date + 101 '&type=' + type; 102 103 // REST API を叩く 104 $('#error').hide(); 105 var request = superagent 106 .get(url) 107 .set('x-api-key', 'abcdefghi') 108 .end(function (error, response) { 109 if (error) { 110 $('#error').text(JSON.stringify(error, null, 2)); 111 $('#error').show(); 112 return; 113 } 114 var data = response.body; 115 console.log(data); 116 //エリアごとにデータ分割 117 for (i = 0; i < 10; i++) { 118 var areaData = { 119 datasets: [data.datasets[i]], 120 labels: data.labels 121 }; 122 console.log(areaData, '#charts' + i); 123 if (myChart) { 124 myChart.destroy(); 125 } 126 drawChart(areaData, '#charts' + i); 127 } 128 }) 129} 130// Day, Week, Monthクリック時の処理 131$('div.typeApi').on('click', function (e) { 132 var typeValue = $(e.target).attr('data-value'); 133 $('#type').val(typeValue); 134 // Day, Week, Monthにactiveを追加 135 $('div.typeApi').removeClass('active'); 136 $(e.target).addClass('active'); 137 updateCharts(); 138}); 139 140$(function () { 141 calendar(); 142 updateCharts(); 143}); 144

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

こちらで実現できました。

Jquery

1function calendar() { 2 // カレンダー 3 $('#datepicker') 4 .datepicker({ 5 dateFormat: 'yy/mm/dd', 6 buttonText: '日付選択', 7 showOn: 'button', 8 beforeShow: function (input, inst) { 9 var calendar = inst.dpDiv; 10 setTimeout(function () { 11 calendar.position({ 12 my: 'right top', 13 at: 'right bottom', 14 of: input 15 }); 16 }, 1); 17 }, 18 onSelect: function (dateText, inst) { 19 console.log('onSelect', dateText, inst); 20 updateCharts(); 21 } 22 }) 23 .datepicker('setDate', new Date()); 24} 25 26// グラフの描画 27function drawChart(areaData, canvasId) { 28 var ctx = $(canvasId)[0].getContext('2d'); 29 var chart = $(canvasId).data('chart'); 30 if (chart) { 31 chart.destroy(); 32 } 33 chart = new Chart(ctx, { 34 type: 'line', 35 data: areaData, 36 options: { 37 legend: { 38 position: 'bottom', // タイトルでの position と同じ 39 labels: { 40 fontSize: 12, // ┐ 41 fontColor: 'rgba(72, 139, 199, 1)' // │タイトルでの fontSize ~ fontFamily と同じ 42 } 43 }, 44 scales: { //軸の設定 45 xAxes: [ // X軸設定 46 { 47 scaleLabel: { // 軸ラベル 48 display: true, // 表示設定 49 fontColor: 'rgba(72, 139, 199, 1)', // 文字の色 50 fontSize: 12 // フォントサイズ 51 }, 52 gridLines: { // 補助線 53 color: 'rgba(72, 139, 199, 1)', // 補助線の色 54 }, 55 ticks: { // 目盛り 56 maxTicksLimit: 7, 57 fontColor: 'rgba(72, 139, 199, 1)', // 目盛りの色 58 fontSize: 12 // フォントサイズ 59 } 60 } 61 ], 62 yAxes: [ // Y軸設定 63 { 64 scaleLabel: { // 軸ラベル 65 display: true, // 表示の有無 66 fontFamily: 'sans-serif', 67 fontColor: 'rgba(72, 139, 199, 1)', // 文字の色 68 fontFamily: 'sans-serif', 69 fontSize: 12 // フォントサイズ 70 }, 71 gridLines: { // 補助線 72 color: 'rgba(72, 139, 199, 1)', // 補助線の色 73 zeroLineColor: 'rgba(72, 139, 199, 1)' // y=0(X軸の色) 74 }, 75 ticks: { // 目盛り 76 min: 0, // 最小値 77 //max: 30, // 最大値 78 stepSize: 5, // 軸間隔 79 fontColor: 'rgba(72, 139, 199, 1)', // 目盛りの色 80 fontSize: 12 // フォントサイズ 81 } 82 } 83 ] 84 }, 85 plugins: { 86 colorschemes: { 87 scheme: 'brewer.Paired12', 88 fillAlpha: 0.2 89 } 90 } 91 } 92 }); 93} 94//データ 95function updateCharts() { 96 // 日付取得 97 var date = $('#datepicker').val(); 98 99 // activeな期間取得 100 var type = $('.active').attr('data-value'); 101 102 // URL を作る(今回は単純なので単に連結する) 103 var url = 'https://example.com/data' + 104 '?date=' + date + 105 '&type=' + type; 106 107 // REST API を叩く 108 $('#error').hide(); 109 var request = superagent 110 .get(url) 111 .set('x-api-key', 'abcdefghi') 112 .end(function (error, response) { 113 if (error) { 114 $('#error').text(JSON.stringify(error, null, 2)); 115 $('#error').show(); 116 return; 117 } 118 var data = response.body; 119 console.log(data); 120 //エリアごとにデータ分割 121 for (i = 0; i < 10; i++) { 122 var areaData = { 123 datasets: [data.datasets[i]], 124 labels: data.labels 125 }; 126 console.log(areaData, '#charts' + i); 127 if (myChart) { 128 myChart.destroy(); 129 } 130 drawChart(areaData, '#charts' + i); 131 } 132 }) 133} 134// Day, Week, Monthクリック時の処理 135$('div.typeApi').on('click', function (e) { 136 var typeValue = $(e.target).attr('data-value'); 137 $('#type').val(typeValue); 138 // Day, Week, Monthにactiveを追加 139 $('div.typeApi').removeClass('active'); 140 $(e.target).addClass('active'); 141 updateCharts(); 142}); 143 144$(function () { 145 calendar(); 146 updateCharts(); 147});

投稿2020/05/26 11:04

spbob

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問