javascript - Chartjs 拆分两位数

Question

我已经多次看到这个问题，但我找不到适合我的解决方案。
我将一个 Django 变量传递给 Chartjs 进行绘图，所有的个位数都是正确的，但它将两位数变成了一个。像 11 是 1,1...23 是 2,3。
我尝试了很多不同的方法，但无法弄清楚，感谢您提供的任何帮助。

    var home_runs = '{% for game in all_games.home_ten %}{{ game.runs }}{% endfor %}'

        var ctx = document.getElementById('runChart').getContext('2d');
        var runChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                  label: home_team,
                  data: home_runs
                },
                {
                  label: away_team,
                  data: away_runs,
                    
                    ],
                    }
            ]
        },
        options: {
            responsive: true,
        },
    });
    

Answer 1

您可以将该值推送到数组中，而不是直接将它们传递给您的 data .因此，您可以将其添加到您的 js 代码中，即:

  var home_runs = [];
  '{% for game in all_games.home_ten %}'
     home_runs.push(parseInt('{{ game.runs }}'))
  '{% endfor %}'

演示代码 :

/* var home_runs = [];
 {% for game in all_games.home_ten %}
home_runs.push(parseInt('{{ game.runs }}'))
{% endfor %}*/
var home_runs = [11, 52, 85, 93]
var away_runs = [12, 52, 82, 94]
var ctx = document.getElementById('runChart').getContext('2d');
var runChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["A", "B", "C", "D"],
    datasets: [{
        label: "Abc",
        data: home_runs
      },
      {
        label: "Xyz",
        data: away_runs

      }
    ],
  },
  options: {
    responsive: true,
  },
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
  <canvas id="runChart" height="140"></canvas>
</div>