Django chart.js多轴折线图

Django 是一个高级 Python Web 框架，它鼓励快速开发和干净、实用的设计。Chart.js 是一个简单而灵活的 JavaScript 图表库，用于创建美观的 HTML5 图表。结合 Django 和 Chart.js 可以创建动态的多轴折线图。

基础概念

多轴折线图：在一个图表中显示多个数据系列，每个系列可以有自己的 Y 轴，这样可以更好地比较不同量级的数据。

类型

双轴折线图：最常见的类型，有两个 Y 轴。
多轴折线图：有三个或更多的 Y 轴。

应用场景

金融数据分析：比较不同股票或货币的价格和交易量。
环境监测：展示温度、湿度和气压等多维度数据。
性能监控：比较不同服务器的性能指标。

示例代码

Django 视图部分

from django.shortcuts import render
from .models import DataPoint

def chart_view(request):
    data = DataPoint.objects.all()
    labels = [d.date for d in data]
    series1 = [d.value1 for d in data]
    series2 = [d.value2 for d in data]
    return render(request, 'chart.html', {'labels': labels, 'series1': series1, 'series2': series2})

Django 模型部分

from django.db import models

class DataPoint(models.Model):
    date = models.DateField()
    value1 = models.FloatField()
    value2 = models.FloatField()

HTML 模板部分（chart.html）

<!DOCTYPE html>
<html>
<head>
    <title>Multi-Axis Line Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: {{ labels|safe }},
                datasets: [{
                    label: 'Value 1',
                    data: {{ series1|safe }},
                    yAxisID: 'y-axis-1',
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }, {
                    label: 'Value 2',
                    data: {{ series2|safe }},
                    yAxisID: 'y-axis-2',
                    borderColor: 'rgb(255, 99, 132)',
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    },
                    'y-axis-1': {
                        position: 'left',
                        title: {
                            display: true,
                            text: 'Value 1'
                        }
                    },
                    'y-axis-2': {
                        position: 'right',
                        title: {
                            display: true,
                            text: 'Value 2'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>