0
私はウェブページを作成しています。このWebページでは、Chartjsファイルをロードします。私の構造をきれいに保つ。私は、Chartオブジェクトを外部の "scripts.js"ファイルに置き、それをスクリプトとしてHTMLで呼び出す必要があります。私はFlaskを使ってウェブサイトを作成しています。FlaskのjavascriptファイルからHTMLへの外部Chartjsグラフの呼び出し
HTMLにすべてのコードを含めるとうまく動作しますが、JSスクリプトをインポートできるようには見えません。私を助けてください。ありがとうございました。
試み： "scripts.js"：
function linechart() {
const LINECHART = document.getElementById("lineChart")
let lineChart = new Chart (LINECHART, {
type: 'line',
data: {
labels: {{ data_date|tojson|safe }},
datasets: [{
responsive: false,
label: "Share Price",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: {{ data_close|tojson|safe }},
spanGaps: true,
}]
},
// orientate the labels to be 90 degrees on x-axis
// credit: https://stackoverflow.com/questions/35022830/chart-js-change-label-orientation-on-x-axis-for-line-charts
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 6,
autoSkipPadding: 2,
maxRotation: 0,
minRotation: 0
}
}]
}
}
}); // end of lineChart
}
HTML：コードは、HTMLファイル内に正常に実行さ
<head>
<script src="{{ url_for('static', filename='scripts.js') }}"></script>
</head>
<canvas id="lineChart" width="20" height="20"></canvas>
<script>
linechart()
</script>
あなたのhtmlは、Flaskが実際のhtmlに変換するテンプレートコードです。出力はどのように見えますか？ブラウザでページを開き、最終的なhtmlを見るために「ソースを表示」を使用します。 '{{}} 'の中の部分は、javascriptファイルの正しい場所を指していない可能性があります。また、URLを直接入力すると、Flask Webサーバーがjavascriptファイルを提供していることを確認する必要があります。 –
これは本当に問題でした。javascriptのデータは{{}}のために読み込まれませんでした。私はscripts.jsファイルの正しい構文に置き換えられました。ありがとうございます、私は答えとしてこれを受け入れます。 – user7202182
コメントテキストも回答として提出します。 –