时间戳

首页 > 解决方案 > Chart Js 函数 (Chart.js) 陷入循环

javascript - Chart Js 函数 (Chart.js) 陷入循环

问题描述

我正在尝试通过在单独的 javascript 文件 (home.js) 中调用 javascript 函数来在我的 HTML 文档 (main.html) 中使用 Chart.js。HTML 如下所示：

{% block head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script type="text/javascript" src="/static/js/home.js"></script>
{% endblock %}


{% block body %}
<div>
    <canvas id='myChart'></canvas>
</div>

<script>
    Chart(data, document.getElementById('myChart'))
</script>

js文件如下所示：

function Chart(data, ctx){
    console.log("JS")
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
}

当我这样做时，它会以某种方式继续执行该函数（即陷入循环，我使用console.log（'JS'）进行了检查。我不知道为什么它一直这样做。图表永远不会显示。如果我直接在标签中的html中添加函数，它可以完美地工作，但我宁愿将js与html分开。我使用flask作为Web框架，这就是变量“数据”的来源。任何提示或想法？

谢谢并恭祝安康

PS：我现在不使用“数据”，因为我什至没有运行图表（这将是稍后数据库查询的结果。

标签： javascripthtmlchart.js

解决方案

首先，与您的无限循环问题无关的两个问题：

  1. 在 main.html 中，data您发送给 Chart.js 的参数是未定义的。大概你会在你的实际代码中解决这个问题。
  2. 在您发送到 Chart.js 的选择器中，您正在发送画布 – document.getElementById('myChart')– 当您应该发送画布上下文 –document.getElementById('myChart').getContext('2d')

一旦这些被修复，你可能会渲染一个图表，但是你会得到一个无限循环，因为你已经调用了你自己的函数Chart，而这也是 Chart.js 函数的名称（它说var myChart = new Chart(ctx, ...). 只需将你的函数名称更改为其他名称.

这是一个示例，我只是放入一个空数组data并将您的函数名称更改为drawChart.

function drawChart(data, ctx){
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
}

drawChart([], document.getElementById('myChart').getContext('2d'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id='myChart'></canvas>

注意：控制台日志中显示的脚本错误是由于 StackOverflow 上的跨域脚本，您可以在自己的站点上修复。

推荐阅读