在html页面中插入折线图,javascript – 从js文件中将Chart.js折线图添加到Jinja2 / Flask html页面...

我在一个简单的Bootstrap html文件中有以下代码,该文件显示Chart.js折线图.

包含图表设置的js文件如下所示：

$(window).on("load", function(){

var ctx = $("#line-chart");

var chartOptions = {

responsive: true,

maintainAspectRatio: false,

legend: {

position: 'bottom',

},

hover: {

mode: 'label'

},

scales: {

xAxes: [{

display: true,

gridLines: {

color: "#f3f3f3",

drawTicks: false,

},

scaleLabel: {

display: true,

labelString: 'Month'

}

}],

yAxes: [{

display: true,

gridLines: {

color: "#f3f3f3",

drawTicks: false,

},

scaleLabel: {

display: true,

labelString: 'Value'

}

}]

},

title: {

display: true,

text: 'Chart.js Line Chart - Legend'

}

};

var chartData = {

labels: ["January", "February", "March", "April", "May", "June", "July"],

datasets: [{

label: "My First dataset",

data: [65, 59, 80, 81, 56, 55, 40],

fill: false,

borderDash: [5, 5],

borderColor: "#9C27B0",

pointBorderColor: "#9C27B0",

pointBackgroundColor: "#FFF",

pointBorderWidth: 2,

pointHoverBorderWidth: 2,

pointRadius: 4,

}, {

label: "My Second dataset",

data: [28, 48, 40, 19, 86, 27, 90],

fill: false,

borderDash: [5, 5],

borderColor: "#00A5A8",

pointBorderColor: "#00A5A8",

pointBackgroundColor: "#FFF",

pointBorderWidth: 2,

pointHoverBorderWidth: 2,

pointRadius: 4,

}, {

label: "My Third dataset - No bezier",

data: [45, 25, 16, 36, 67, 18, 76],

lineTension: 0,

fill: false,

borderColor: "#FF7D4D",

pointBorderColor: "#FF7D4D",

pointBackgroundColor: "#FFF",

pointBorderWidth: 2,

pointHoverBorderWidth: 2,

pointRadius: 4,

}]

};

var config = {

type: 'line',

options : chartOptions,

data : chartData

};

var lineChart = new Chart(ctx, config);

});

我想避免使用单独的javascript文件,而只是在Jinja2 / Flask html页面中包含所有内容.一个工作示例可以在this tutorial中找到,这与我想要遵循的方式相同.我试图将任何粘贴js部分复制到我的html页面并放在< script>之间标签,但不幸的是它不起作用.

这是我尝试的方式：

# in my jinja2/flask html page

var ctx = $("#line-chart");

var chartOptions = {

responsive: true,

maintainAspectRatio: false,

legend: {

position: 'bottom',

},

hover: {

mode: 'label'

},

scales: {

xAxes: [{

display: true,

gridLines: {

color: "#f3f3f3",

drawTicks: false,

},

scaleLabel: {

display: true,

labelString: 'Month'

}

}],

yAxes: [{

display: true,

gridLines: {

color: "#f3f3f3",

drawTicks: false,

},

scaleLabel: {

display: true,

labelString: 'Value'

}

}]

},

title: {

display: true,

text: 'Chart.js Line Chart - Legend'

}

};

// Chart Data

var chartData = {

labels: ["January", "February", "March", "April", "May", "June", "July"],

datasets: [{

label: "My First dataset",

data: [65, 59, 80, 81, 56, 55, 40],

fill: false,

borderDash: [5, 5],

borderColor: "#9C27B0",

pointBorderColor: "#9C27B0",

pointBackgroundColor: "#FFF",

pointBorderWidth: 2,

pointHoverBorderWidth: 2,

pointRadius: 4,

}, {

label: "My Second dataset",

data: [28, 48, 40, 19, 86, 27, 90],

fill: false,

borderDash: [5, 5],

borderColor: "#00A5A8",

pointBorderColor: "#00A5A8",

pointBackgroundColor: "#FFF",

pointBorderWidth: 2,

pointHoverBorderWidth: 2,

pointRadius: 4,

}, {

label: "My Third dataset - No bezier",

data: [45, 25, 16, 36, 67, 18, 76],

lineTension: 0,

fill: false,

borderColor: "#FF7D4D",

pointBorderColor: "#FF7D4D",

pointBackgroundColor: "#FFF",

pointBorderWidth: 2,

pointHoverBorderWidth: 2,

pointRadius: 4,

}]

};

var config = {

type: 'line',

// Chart Options

options : chartOptions,

data : chartData

};

// Create the chart

var lineChart = new Chart(ctx, config);

});

不幸的是,我对JS并不熟悉,也没有更多关于如何在Flask应用程序中显示图表的想法.如果有人能够向我展示我需要实施的必要修改以使其工作,我将非常感激.