Skip to main content

Django Chart.js 和 Hightchart ajax 视图

项目描述

Django Chartjs 允许您在 Django 应用程序中管理图表。

https://travis-ci.org/peopledoc/django-chartjs.svg?branch=master https://coveralls.io/repos/peopledoc/django-chartjs/badge.png?branch=master&style=flat https://img.shields.io/pypi/v/django-chartjs.svg

这与 Chart.js 和 Highcharts JS 库兼容。

使用一组预定义的基于类的视图,您只需编写 SQL 查询即可开始使用。

入门

安装 django-chartjs:

pip install django-chartjs

将其添加到您的INSTALLED_APPS设置中:

INSTALLED_APPS = (
    '...',
    'chartjs',
)

使用它

一个简单的折线图示例。

1. 创建 HTML 文件

{% load static %}
<html>
    <head>
        <title>django-chartjs line chart demo</title>
        <!--[if lte IE 8]>
            <script src="{% static 'js/excanvas.js' %}"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Some Line Charts loaded in Ajax!</h1>

        <canvas id=<s>"myChart"</s> width=<s>"500"</s> height=<s>"400"</s>></canvas>

        <script type=<s>"text/javascript"</s> src=<s>"http://code.jquery.com/jquery-1.10.0.min.js"</s>></script>
        <script type=<s>"text/javascript"</s> src=<s>"{% static 'js/Chart.min.js' %}"</s>></script>
        <script type=<s>"text/javascript"</s>>
            $.get('{% url "line_chart_json" %}', function(data) {
                var ctx = $("#myChart").get(0).getContext("2d");
                new Chart(ctx, {
                    type: 'line', data: data
                });
            });
        </script>
    </body>
</html>

2. 创建带有标签和数据定义的视图

from django.views.generic import TemplateView
from chartjs.views.lines import BaseLineChartView


class LineChartJSONView(BaseLineChartView):
    def get_labels(self):
        """Return 7 labels for the x-axis."""
        return ["January", "February", "March", "April", "May", "June", "July"]

    def get_providers(self):
        """Return names of datasets."""
        return ["Central", "Eastside", "Westside"]

    def get_data(self):
        """Return 3 datasets to plot."""

        return [[75, 44, 92, 11, 44, 95, 35],
                [41, 92, 18, 3, 73, 87, 92],
                [87, 21, 94, 3, 90, 13, 65]]


line_chart = TemplateView.as_view(template_name='line_chart.html')
line_chart_json = LineChartJSONView.as_view()

3. 使用 TemplateView 和 AJAX 调用 'line_chart_json' 的新 url 更新 urls.py,如 chart.html

from .views import line_chart, line_chart_json

urlpatterns = [
  '...',
  path('chart', line_chart, name='line_chart'),
  path('chartJSON', line_chart_json, name='line_chart_json'),
]

4. 获取 Chart.js 折线图

https://raw.github.com/peopledoc/django-chartjs/master/docs/_static/django-chartjs.png

就是这么简单!

对于包括 HighCharts 折线图在内的其他示例,请不要犹豫查看演示项目。

另外,请随时贡献您的演示!

项目详情


下载文件

下载适用于您平台的文件。如果您不确定要选择哪个,请了解有关安装包的更多信息。

源分布

django-chartjs-2.3.0.tar.gz (589.5 kB 查看哈希)

已上传 source

内置分布

django_chartjs-2.3.0-py3-none-any.whl (609.5 kB 查看哈希

已上传 py3