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

我在显示Chart.js折线图的简单Bootstrap html文件中有以下代码。从js文件中添加Chart.js折线图到Jinja2/Flask html页面

包含图表的设置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 /瓶html页面的一切。一个可行的例子可以在this tutorial中找到，这与我想要遵循的方式相同。我试图复制任何粘贴js部分到我的html页面，并放在

这里是我的尝试：

# 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和没有什么应该怎样做才能显示我的瓶的应用程序图表更多的想法。如果有人能够向我展示我需要实施的必要修改以使其发挥作用，我将非常感激。

2017-08-09

rihe

+0

请提供您的浏览器调试控制台的日志(或者说没有)。请参阅[本文适用于Firefox](https://developer.mozilla.org/en/docs/Tools/Browser_Console)和[适用于Chrome的此版本](https://developers.google.com/web/tools/chrome- devtools /控制台/)。编辑：你是否附加了所有必需的脚本(Chart.js，jQuery)？ –

+0

'但不幸的是它不工作'什么不行？您在Chrome的开发控制台或其他任何内容中看到的任何错误？ –

+0

请提供完整的jinja2模板，我们需要知道您是否已导入所有需要的脚本。 –