在Chart.js折线图中渲染标签(Python/Pycharm)

sigwle7e  于 2023-04-06  发布在  Chart.js
关注(0)|答案(1)|浏览(144)

我正在尝试创建一个Chart.js折线图,其中可以通过渲染标签来动态设置标签。
下面是www.example.com中的代码views.py:

def graph1(request):
    labels = [1, 2, 3, 4, 5]
    data1 = [1, 3, 2, 5, 4]
    data2 = [5, 8, 9, 6, 7]
    player1 = 'Paul'
    player2 = 'Lisa'
    return render(request, 'graph1.html', {
        'labels': labels,
        'data1': data1,
        'data2': data2,
        'player1': player1,
        'player2': player2,
    })

下面是HTML代码:

<div id="container" style="width: 100%;">
    <canvas id="line-chart"></canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  <script>

    var config = {
      type: 'line',
      data: {
        labels: {{ labels }},
        datasets: [{
            data: {{ data1 }},
            label: "Player 1",
            borderColor: "#3e95cd",
            fill: false,
            tension: 0
          }, {
            data: {{ data2 }},
            label: "Player 2",
            borderColor: "#8e5ea2",
            fill: false,
            tension: 0
      }
    ]
  },
    };

    window.onload = function() {
      var ctx = document.getElementById('line-chart').getContext('2d');
      window.myPie = new Chart(ctx, config);
    };

  </script>

我的图表是这样显示的:
enter image description here
而不是有静态标签显示“球员1”和“球员2”,我想这些是动态设置。所以,也许第一次显示为“保罗”和“丽莎”,下一次显示为“彼得”和“玛丽”(取决于什么是从数据库中读取)。
我尝试了不同的选项,但没有通过渲染获得此设置:

<div id="container" style="width: 100%;">
    <canvas id="line-chart"></canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  <script>

    var config = {
      type: 'line',
      data: {
        labels: {{ labels }},
        datasets: [{
            data: {{ data1 }},
            label: {{ player1 }},
            borderColor: "#3e95cd",
            fill: false,
            tension: 0
          }, {
            data: {{ data2 }},
            label: {{ player2 }},
            borderColor: "#8e5ea2",
            fill: false,
            tension: 0
      }
    ]
  },
    };

    window.onload = function() {
      var ctx = document.getElementById('line-chart').getContext('2d');
      window.myPie = new Chart(ctx, config);
    };

  </script>

用上面的代码来做,那么线图根本不会显示。
我感谢任何帮助,让这个工作。我是一个初学者Python/Pycharm开发人员,这是我的第一个项目。

wbrvyc0a

wbrvyc0a1#

我能够自己解决这个问题,只需在标签的渲染数据周围添加引号,如以下代码所示:

datasets: [{
            data: {{ data1 }},
            label: "{{ player1 }}",
            borderColor: "#3e95cd",
            fill: false,
            tension: 0
          }, {
            data: {{ data2 }},
            label: "{{ player2 }}",
            borderColor: "#8e5ea2",
            fill: false,
            tension: 0
      }

相关问题