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

    <div class="card-block chartjs">
       <canvas id="line-chart" height="500"></canvas>
    </div>

包含图表设置的 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
<div class="card-body collapse in">
    <div class="card-block chartjs">
        <canvas id="line-chart" height="500"></canvas>
    </div>
</div>
<script>
    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);
});
</script>

不幸的是，我对 JS 不是很熟悉，也不知道应该如何在我的 Flask 应用程序中显示图表。我需要实现什么才能使其发挥作用？

最佳答案

首先确保在您的模板(或其扩展的模板)中引用了所需的 JS。

假设您从 static/js 文件夹提供它:

<head>
    ...
    <script src='/static/js/Chart.bundle.min.js'></script>
    ...
</head>

你的脚本标签内容看起来大部分都很好，只是稍微修改一下获取上下文，你似乎有一个尾随 }); 你需要删除:

<script>
    // get context
    var ctx = document.getElementById("line-chart").getContext("2d");

    ....

    // Create the chart
    var lineChart = new Chart(ctx, config);

    // REMOVE THIS FROM THE END OF YOUR SCRIPT
    //});
</script>

关于javascript - 从 JS 文件将 Chart.js 折线图添加到 Jinja2/Flask html 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45590367/