チャート(グラフ)をjavascriptで作ったのですが、たまに、グラフが表示されないという状態が続いています。
チャートが表示されない時というのは、決まってputリクエストの処理を行った後です。
以下がエラー文です。
Uncaught ReferenceError: Chart is not defined at drawLineChart (<anonymous>:32:23) at <anonymous>:15:5 at o.assignNewBody (turbolinks.self-569ee7c8f989e.js?body=1:6) at o.replaceBody (turbolinks.self-569ee74ef572a485f64c82ddc8f989e.js?body=1:6) at turbolinks.self-5699b1ec033a0f572a864c82ddc8f989e.js?body=1:6 at o.e.renderView (turbolinks.self-569ee74eaa15c1e201931f572a485f62ddc8f989e.js?body=1:6) at o.render (turbolinks.self-9ee74eaa15c1a0f572a485f64c82ddc8f989e.js?body=1:6) at Function.e.render (turbolinks.self-569ee74ea0f572a485f64c82ddc8f989e.js?body=1:6) at t.renderSnapshot (turbolinks.self-569ee74eaa15c1e33a0f572a485f64c82d989e.js?body=1:6) at t.render (turbolinks.self-56a0f485f64c82ddc8f989e.js?body=1:6)
Railsのコントローラーで処理した変数をグラフの要素に反映させています。
コントローラーの処理が終わる前に、javascriptが起動しているのか?
と思ったため、
実行前に0.3秒まつコードを挟みましたが治りません。
window.onloadで実行させても変わりませんでした。
何原因かわかる方はいますでしょうか?
<script> function sleep(waitMsec) { var startMsec = new Date(); // 指定ミリ秒間だけループさせる(CPUは常にビジー状態) while (new Date() - startMsec < waitMsec); } sleep(300); var data = <%= @data %>; var labels = <%= raw @date_like_g %>; drawLineChart( "myChart2", // elemet.id data, // data labels, // labels "#FA8BFF", // firstColour "#2BD2FF", // secondColour "#2BFF88" // thirdColour ); function drawLineChart(id, data, labels, firstColour, secondColour, thirdColour) { var ctx = document.getElementById(id).getContext("2d"); var width = window.innerWidth || document.body.clientWidth; var gradientStroke = ctx.createLinearGradient(0, 0, width, 0); gradientStroke.addColorStop(0, firstColour); gradientStroke.addColorStop(0.6, secondColour); gradientStroke.addColorStop(0.9, thirdColour); var myChart = new Chart(ctx, { type: "line", data: { labels: labels, datasets: [ { label: "Data", borderColor: gradientStroke, pointBorderColor: gradientStroke, pointBackgroundColor: gradientStroke, pointHoverBackgroundColor: gradientStroke, pointHoverBorderColor: gradientStroke, pointBorderWidth: 8, pointHoverRadius: 8, pointHoverBorderWidth: 1, pointRadius: 0, backgroundColor: gradientStroke, borderWidth: 1, data: data }, ] }, options: { responsive: true, maintainAspectRatio: false, legend: { position: "none" }, scales: { yAxes: [ { ticks: { fontFamily: "Roboto Mono", fontColor: "#444", fontStyle: "bold", beginAtZero: true, padding: 20 }, gridLines: { drawTicks: false, display: false, drawBorder: false } } ], xAxes: [ { gridLines: { zeroLineColor: "transparent" }, ticks: { fontFamily: "Roboto Mono", fontColor: "#444", fontStyle: "bold", beginAtZero: true, padding: 20 }, gridLines: { drawTicks: false, display: false, drawBorder: false } } ] } } }); } </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。