Django chart.js 多轴折线图答案

【问题标题】：Django chart.js multi axis line chartDjango chart.js 多轴折线图
【发布时间】：2021-05-10 23:09:15
【问题描述】：

大家好，我从Fiddle example 获得灵感，尝试在我的 django 项目中创建一个类似的多轴折线图。我有我的看法：

class dashboard(TemplateView):
template_name = 'users/dashboard.html'

def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    context['qs'] = DummyData.objects.all()
    data = DummyData.objects.all()
    years=[]
    for i in range(data.count()) :
        if data[i].year not in years :
            years.append(data[i].year)

    context['years'] = years
    return context

在我的dashboard.html中：

    {% extends 'users/base.html' %} {% load static %} {% block content %}


    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- semantic UI -->
    <link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
    <!--Chart js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>



<script>
     $(document).ready(function (){
        var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
   type: 'line',
  data: {
    labels: [{% for year in years %} '{{year}}', {% endfor %}],
    datasets: [{% for item in qs %}
    {
      label: '{{item.site}}',
      yAxisID: '{{item.site}}',
      data: [100, 96, 84, 76, 69] , {% endfor %}
  ]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
      }, {
        id: 'B',
        type: 'linear',
        position: 'right',
        ticks: {
          max: 1,
          min: 0
        }
      }]
    }
  }
});
     });
 </script>
   <canvas id="myChart" width="400" height="100"></canvas>


{% endblock content %}

当我复制小提琴示例时，它在我的 dahsboard.html 中正确显示如下：

但是当我尝试更改我的dashboard.html中显示的代码中的数据集时，没有任何显示，标签更新正常，但这就是我的图表无法正常工作的原因：

    datasets: [{% for item in qs %}
    {
      label: '{{item.site}}',
      yAxisID: '{{item.site}}',
      data: {{item.turn_over}}' , {% endfor %}
  ]

我确定这不是应该的方式，我是 chart.js 的初学者，我想要做的是加载我的 Dummydata 表中有多少网站并显示他们的营业额

谢谢

【问题讨论】：

edit你的问题并添加你正在使用的虚拟数据，同时检查控制台是否有任何错误。

标签： django charts chart.js

【解决方案1】：

完成这是一个逗号定位错误，我检查了控制台，问题是当我的 if 条件没有被检查而不是跳过时，它添加了一个空值，这意味着我得到了例如 1, , , , 2 , , , 3 而不是 1,2,3 并且图表正在渲染空单元格，无论如何这是我能够为数据修复它的方法：

data: {
labels: [{% for year in years %} '{{year}}', {% endfor %}],
datasets: [
    {% for site in sites %}

    {
  label: '{{site.site}}',
  yAxisID: 'y',
  borderColor: '{{site.color}}',
  backgroundColor: 'transparent',

  data: [ {% for item in qs %}
        {% if item.site == site.site %}


        {{item.turn_over}} ,{% endif %}  {% endfor %}
    ]
}, {% endfor %}

 ]

}

【讨论】：