添加图表.js从js fi到Jinja2/Flask html页面的折线图

2024-04-24 05:12:27 发布

您现在位置：Python中文网/ 问答频道 /正文
5185 3

我在一个简单的引导html文件中有以下代码图表.js折线图。在

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

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

^{pr2}$

我希望避免使用单独的javascript文件，而是在Jinja2/flaskhtml页面中包含所有内容。一个工作示例可以在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应用程序中显示图表。如果有人能向我展示我需要的修改，我将非常感激。在


Tags： 文件divfalsetruedatavarhtmldisplay
2条回答
网友
1楼 · 编辑于 2024-04-24 05:12:27

正如bgse在回答中所说的，您需要先加载库。我建议您使用CDN，这样就不需要下载ChartJS库了。在

其次，您正在编写一些JS，这些JS可能会在将库提取到页面之前执行。所以我要补充的是：

<div class="card-body collapse in">
    <div class="card-block chartjs">
        <canvas id="line-chart" height="500"></canvas>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        // Your JS code here
        // ...
    });
</script>

这样脚本代码将在加载所有JS时执行。在

网友
2楼 · 编辑于 2024-04-24 05:12:27

首先确保所需的JS在您的模板（或它扩展的模板）中被引用。在

假设您是从static/js文件夹提供的：

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

您的脚本标记内容看起来很好，只是对上下文进行了一点修改，并且您似乎有一个需要删除的尾随});：

^{pr2}$

相关问题 更多 >

    编程相关推荐