Django和Chart.js。多数据集的线形图

Question

我试图用chart.js和多个数据集创建一个线形图（数据集的数量在它的生命周期内可以改变）。

...从我的 "views.py "中。

label = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
coworker = ['John Doe', 'Jane Doe', 'Michael Smith']
data = [[1, 2, 3, 4, 5], [5, 4, 3, 2, 1], [3, 4, 2, 1, 5]]

如果这是一个只有一个数据列表和一个同事的线图 我的图表通常是这样的：

<script>
$(document).ready(function(){
    var ctx = document.getElementById('myChart1').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {{ label|safe }},
            datasets: [{
                label: 'Some text...',
                data: {{ data|safe }},
                backgroundColor: ...,
                borderColor: ...,
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                    }
                }],
            }
        }
    });
});

我已经尝试过这样循环浏览我的数据... ...

<script>
$(document).ready(function(){
    var ctx = document.getElementById('myChart1').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {{ label|safe }},
            datasets: [{
                label: [{% for i in label%}"{{ i }}",{% endfor %}],
                data: [{% for j in data %}{{ j }}, {% endfor %}],,
                backgroundColor: ...,
                borderColor: ...,
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                    }
                }],
            }
        }
    });
});

现在，图表和 "星期一 "到 "星期五 "的标签是可见的，但仅此而已......有谁知道，我做错了什么，甚至有更好的解决方案吗？

谢谢，祝你有美好的一天

Answer 1

你需要从你的可用数据中定义3个不同的数据集。

这在下面的可运行代码片段中得到了说明。不幸的是，我对python了解不多，因此这是一个纯JavaScript的解决方案。因此，这是一个纯JavaScript的解决方案。不过我认为你可以很容易地加入你的python代码，以获得同样的结果。

const label = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
const coworker = ['John Doe', 'Jane Doe', 'Michael Smith'];
const data = [[1, 2, 3, 4, 5], [5, 4, 3, 2, 1], [3, 4, 2, 1, 5]];

var myChart = new Chart('chart', {
  type: 'bar',
  data: {
    labels: label,
    datasets: [{
      label: coworker[0],
      data: data[0],
      backgroundColor: 'red'
    },
    {
      label: coworker[1],
      data: data[2],
      backgroundColor: 'blue'
    },
    {
      label: coworker[2],
      data: data[2],
      backgroundColor: 'green'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }],
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="90"></canvas>