根据字典长度创建多个图表答案

【问题标题】：Creating multiple charts based on dictionary length根据字典长度创建多个图表
【发布时间】：2021-03-24 11:54:14
【问题描述】：

我正在为一些水质传感器构建一个仪表板网站，这些传感器将信息作为 JSON 格式的 API 发送。该计划是使用 chart.js 和 django 使用该数据创建实时图表。现在我正在将 JSON 文件转换为像这样的字典：

JSON file: 
{
  "11:00:00 AM": {
    "Temperatura": 30,
    "pH": 7.1,
    "Conductividad": 759,
    "Cloro Residual": 1.1,
    "Turbidez": 0,
    "Color": "<5",
    "pH de la Det de color": 7.12,
    "Solidos totales": 512,
    "S�lidos disueltos": 494,
    "S�lidos suspendidos totales": 0,
    "Dureza total como CaCO3": 227.24,
    "Alcalinidad como CaCO3": 227.7,
    "Cloruros": 64.02,
    "Fluoruros": 0.91,
    "Nitrogeno Amoniacal": 0,
    "Nitrogeno de nitritos": 0,
    "Nitrogeno de nitratos": 4.47,
    "Sulfatos": 37.27,
    "Sustancias activas al azul de metileno": 0,
    "Fenoles": 0,
    "Coliformes totales": 0,
    "Aluminio": 0,
    "Arsenico": 0.015,
    "Bario": 0.1784,
    "Calcio": 79.7,
    "Cadmio": 0,
    "Cromo": 0.0085,
    "Cobre": 0,
    "Fierro": 0.0327,
    "Potasio": 12.18,
    "Magnesio": 13.37,
    "Manganeso": 0,
    "Sodio": 55.75,
    "Plomo": 0,
    "Zinc": 0,
    "Mercurio": 0
  },

然后我将它们转换为具有所有值的字典，如下所示：

    ['11:00:00 AM', '11:10:05 AM', '11:20:10 AM', '11:30:14 AM', '11:40:19 AM', '11:50:24 AM', '12:00:29 PM', '12:10:34 PM', '12:20:38 PM', '12:30:43 PM', '12:40:48 PM', '12:50:53 PM', '01:00:58 PM', '01:11:03 PM', '01:21:07 PM', '01:31:07 PM']
[[30, 30, 28, 29, 19, 0, 0, 29, 31, 33, 27, 29, 27, 29, 30, 30], [7.1, 7.6, 7.5, 7.4, 7.5, 5, 8.5, 7.7, 7.2, 7.4, 7.2, 7.4, 7.3, 7.7, 7.7, 7.7], [759, 899, 869, 898, 833, '0', '', 841, 862, 826, 861, 896, 857, 836, 864, 864], [1.1, 0.7, 1, 0.3, 1.1, '0', 1.5, 1, 0.6, 1, 0.6, 0.3, 0.6, 1, 1, 1], [0, 0, 0, 0, 0, '0', 5, 0, 0, 0, 0, 0, 0, 0, 0, 0], ['<5', '<5', '<5', '<5', '<5', '0', 20, '<5', '<5', '<5', '<5', '<5', '<5', '<5', '<5', '<5'], [7.12, 7.47, 7.4, 7.38, 7.42, '0', '', 7.58, 7.74, 7.53, 7.7, 7.45, 7.52, 7.55, 7.58, 7.58], [512, 598, 584, 599, 564, '0', '', 579, 576, 558, 586, 596, 593, 583, 569, 569], [494, 586, 562, 568, 530, '0', 1000, 538, 566, 550, 576, 564, 530, 558, 532, 532], [0, 0, 0, 0, 0, '0', '', 0, 0, 0, 0, 0, 0, 0, 0, 0], [227.24, 319.47, 296, 301.54, 263.56, '0', 500, 278.62, 292, 261.31, 298, 295.51, 300, 294.54, 279.54, 279.54], [227.7, 229.2, 222.1, 246.8, 213.4, '0', '', 232.6, 227.7, 224.8, 225.6, 44.2, 226.7, 225.4, 225.6, 225.6], [64.02, 112.16, 107, 111.17, 102.07, '0', 250, 93.69, 99.12, 91.32, 104.05, 106.7, 101.58, 96.16, 101.58, 101.58], [0.91, 0.9, 0.98, 0.94, 0.96, '0', 1.5, 1.07, 0.97, 1, 0.91, 0.94, 0.83, 0.88, 0.92, 0.92], [0, 0, 0, 0, 0, '0', 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, '0', 0.05, 0, 0, 0, 0, 0, 0, 0, 0, 0], [4.47, 4.21, 4.49, 4.51, 4.76, '0', 10, 4.01, 3.91, 3.96, 3.96, 4.67, 4.17, 3.94, 4.59, 4.59], [37.27, 43.75, 43.91, 43.33, 41.2, '0', 400, 43.39, 43.67, 42.1, 39.94, 46.48, 44.58, 42.52, 45.06, 45.06], [0, 0, 0, 0, 0, '0', 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, '0', 0.001, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, '0', 2, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, '0', 0.2, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0.015, 0.0128, 0.0121, 0.0137, 0.0147, '0', 0.05, 0.0147, 0.014, 0.0136, 0.0134, 0.0135, 0.0139, 0.0145, 0.0152, 0.0152], [0.1784, 0.192, 0.1893, 0.1783, 0.2004, '0', 0.7, 0.1913, 0.1741, 0.1762, 0.1716, 0.1763, 0.1749, 0.1906, 0.2021, 0.2021], [79.7, 102, 80.42, 93.63, 97.76, '0', '', 108.9, 84.7, 83.81, 82.5, 91.71, 86.72, 105.9, 103, 103], [0, 0, 0, 0, 0, '0', 0.005, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0.0085, 0.0043, 0.0049, 0.0077, 0.0088, '0', 0.05, 0.0073, 0.0065, 0.0073, 0.0063, 0.0078, 0.0066, 0.0071, 0.0097, 0.0097], [0, 0.0851, 0, 0.0075, 0, '0', 2, 0, 0.0623, 0.0071, 0.0102, 0.0112, 0.12, 0, 0, 0], [0.0327, 0, 0, 0, 0.0364, '0', 0.3, 0, 0, 0, 0, 0, 0, 0, 0.043, 0.043], [12.18, 11.9, 10.32, 11.51, 13.19, '0', '', 12.43, 10.58, 11.59, 10.28, 11.34, 10.86, 12.23, 13.27, 13.27], [13.37, 18.03, 15.31, 16.42, 17.23, '0', '', 15.85, 17.71, 14.72, 14.35, 16.03, 14.98, 15.6, 17.13, 17.13], [0, 0, 0, 0, 0, '0', 0.15, 0, 0, 0, 0, 0, 0, 0, 0, 0], [55.75, 56.45, 48.75, 54.63, 58.86, '0', 200, 52.8, 48.68, 53.42, 47.29, 53.85, 49.52, 52.47, 59.05, 59.05], [0, 0, 0, 0, 0, '0', 0.025, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0.0561, 0, 0, 0, '0', 5, 0, 0, 0.0394, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, '0', 0.001, 0, 0, 0, 0, 0, 0, 0.001, 0, 0]]

在我的视图页面中，我将所有这些信息发送到 HTML，其中 chart.js 使用该数据创建图表。

from django.http import JsonResponse
from django.shortcuts import render
from django.views.generic import View
import json

from rest_framework.views import APIView
from rest_framework.response import Response


class HomeView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'charts.html', {})


def get_data(request, *args, **kwargs):
    return JsonResponse(data)


class ChartData(APIView):
    authentication_classes = []
    permission_classes = []

    def get(self, request, format=None):
        with open("file.json") as f:
            data = json.load(f)
            labels_list = list(data)
            a = list(data.values())[0]
            filename = 'param_'
            counter1 = 1
            counter2 = 2
            parameters = {}
            for x in range(len(a.values())):
                counter1 = str(counter1)
                full_name = (filename + counter1)
                counter1 = counter2
                counter2 += 1
                full_values = []
                for i in data:
                    v = labels_list.index(i)
                    aaa = list(data.values())[v]
                    val = list(aaa.values())[x]
                    full_values.append(val)
                parameters[full_name] = full_values
        labels = list(data)
        name_param = list(a)
        data = {
            "labels": labels,
            "values": list(parameters.values()),
            "name_param": name_param,
        }
        return Response(data)

我的问题在于创建图表，现在我必须手动创建画布，为它们提供 ID，为它们及其各自的数据创建新的上下文。

{% extends 'base.html' %}

<script>
{% block jquery %}
var endpoint = '/api/chart/data/'
var labels =  []
var values = []
var name_param = []

$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){
        labels = data.labels
        values = data.values
        name_param = data.name_param
        console.log(data)
        setChart()
    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)
    }
})
function setChart(){
                var ctx = document.getElementById('myChart');
                var ctx2 = document.getElementById('myChart2');
                var ctx3 = document.getElementById('myChart3');
                var ctx4 = document.getElementById('myChart4');
                var ctx5 = document.getElementById('myChart5');
                var ctx6 = document.getElementById('myChart6');
                var myChart = new Chart(ctx6, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: name_param[5],
                            data: values[5],
                            fill: false
                        }]
                    }

                })
                var myChart = new Chart(ctx5, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: name_param[4],
                            data: values[4],
                            fill: false
                        }]
                    }

                })
                var myChart = new Chart(ctx4, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: name_param[3],
                            data: values[3],
                            fill: false
                        }]
                    }

                })
                var myChart = new Chart(ctx3, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: name_param[2],
                            data: values[2],
                            fill: false
                        }]
                    }

                })
                var myChart = new Chart(ctx2, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: name_param[1],
                            data: values[1],
                            fill: false
                        }]
                    }

                })
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: name_param[0],
                            data: values[0],
                            fill: false
                        }]
                    }

                })
}
{% endblock %}
</script>

{% block content %}

<div class='row'>
    <div class='col-sm-12' url-endpoint='{% url "api-data" %}'>
        <h1>Hello World</h1>
        <div class="col-sm-4">
        <canvas id="myChart" width="400" height="400"></canvas>
        </div>
        <div class="col-sm-4">
        <canvas id="myChart2" width="400" height="400"></canvas>
        </div>
        <div class="col-sm-4">
        <canvas id="myChart3" width="400" height="400"></canvas>
        </div>
        <div class="col-sm-4">
        <canvas id="myChart4" width="400" height="400"></canvas>
        </div>
        <div class="col-sm-4">
        <canvas id="myChart5" width="400" height="400"></canvas>
        </div>
        <div class="col-sm-4">
        <canvas id="myChart6" width="400" height="400"></canvas>
        </div>
    </div>
</div>

{% endblock content %}

我的问题是，是否有办法让 for 循环为每个参数创建图表。或者您将如何建议创建多个图表？

【问题讨论】：

您好，您好，您似乎没有对下面的答案做出任何回应。你能告诉我它是否对你有帮助吗？

标签： javascript python json django chart.js

【解决方案1】：

在查看您的数据时，我认为您可以从改进数据结构开始。原因是数据是每个图表唯一不同的地方。因此，根据图表的需要调整数据是让前端更轻松地创建图表的好方法。

values 和 name_param 列表都是独立的，但它们都通过索引链接。这可以通过在新字典中创建 name_param / value 组来改进。并且命名属性以反映Chart 实例的设置会更好，例如label 和data。

尝试将您的列表修改为以下结构。

{
  labels: [], // Labels remains unchanged.
  datasets: [ // New array with objects.
    {
      label: '', // previously known as name_param
      data: '' // previously known as value
    },
    {
      label: '',
      data: ''
    },
    // ... etc.
  ]
}

这使您可以轻松地遍历dataset 属性中的每个组，并为每个组创建一个新图表。但首先您需要一些帮助函数来创建 <div>、<canvas> 和 Chart 实例。

首先是<div> 和<canvas>。下面的函数创建了 bootstrap 列和 canvas 元素，它们将被放置在 DOM 中。

function createCanvasAndColumn() {
  const column = document.createElement('div');
  div.classList.add('col-sm-4');

  const canvas = document.createElement('canvas');
  canvas.width = 400;
  canvas.height = 400;

  column.append(canvas);
 
  /** 
   * Return both the canvas and the column.
   * The column is needed to append to the row.
   * The canvas is needed to create a chart with.
   */
  return { canvas, column };
}

我们不需要id 属性，因为我们已经在canvas 常量中引用了元素。画布将附加到<div>。然后它返回一个对象，其中包含对列的引用（我们需要将其添加到文档中）和对画布的引用（我们需要 Chart 实例）。

现在用于创建图表。我一直牢记答案开头建议的更改的数据结构，因为数据应该如何出现在您的应用程序中，因此以下函数使用该结构。

const chartsRow = document.getElementById('charts-row');

function createCharts({ labels, datasets }) {
  /**
   * Loop over each item in datasets and create a
   * new chart for each item. Each chart is then returned
   * resulting in an array of Chart instances.
   */
  const charts = datasets.map((dataset) => {
    const { canvas, column } = createCanvasAndColumn();

    const chart = new Chart(canvas, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          ...dataset,
          fill: false
        }]
      }
    });

    // Add column (and canvas) to the row.
    chartsRow.append(column);
    return chart;
  });

  /**
   * Return the charts array. This is not mandatory,
   * but it might come in handy if you'd need to access
   * the Chart instances at some point.
   */
  return charts;
}

这个createCharts 函数需要一个带有labels 和dataset 键的对象。它循环遍历 datasets 数组以为每个集合创建一个画布元素。然后，该画布元素将用于创建一个新的 Chart 实例。每个数据集的name 和value 将用于设置该Chart 实例的数据。

您可能已经注意到循环是用map 完成的。这将遍历数组中的每个项目，并期望每个项目都有一个return 语句。这将导致基于循环内的返回值创建一个新数组。 charts 常量实际上是 Chart 实例的数组。

现在有了这些函数，您所要做的就是将从 Django 应用程序收到的数据传递到 createCharts 函数以构建图表。

通过添加id 属性使您的行易于选择。此属性应具有唯一值。在上面的createCharts sn-p 中，正在从文档中选择元素以附加图表。

<div class='row' id="charts-row">
  <div class='col-sm-12' url-endpoint='{% url "api-data" %}'>
    <h1>Hello World</h1>
  </div>
</div>

您从这里调用您的请求并将数据传递给您的 createCharts 函数，然后该函数循环数据并为每个项目创建一个图表。

const endpoint = '/api/chart/data/';

$.ajax({
  method: "GET",
  url: endpoint,
  success: function(data) {
    createCharts(data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log("error");
    console.log(textStatus);
  }
})

【讨论】：