Django Highcharts

最新推荐文章于 2024-01-13 00:37:03 发布

转载最新推荐文章于 2024-01-13 00:37:03 发布 · 1.8k 阅读

本文介绍如何使用DjangoHighcharts轻松展示图表，包括安装配置步骤及示例代码，演示了如何创建条形图视图并将其集成到Django项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Docs »
Django Highcharts
Edit on GitHub

Django Highcharts

Django Highchart will make it easier for you to display highcharts graphs.

Quickstart

Install django-highcharts using pip (we do recommend to do it in a virtualenv).

 
      git clone https://github.com/novapost/django-highcharts.git
cd django-highcharts
pip install -e ./

To integrate it into a Django project, simply add it to your INSTALLED_APPS:

 
      INSTALLED_APPS = [
    # some interesting stuff...
    'highcharts',
    # some other stuff...
]
 
     

Don’t forget to set your STATIC_ROOT path and to run the following command to update the static files:

python manage.py collectstatic

You’re now ready to use the available views.

The view

 
       from highcharts.views import HighChartsBarView

class BarView(HighChartsBarView):
    categories = ['Orange', 'Bananas', 'Apples']

    @property
    def series(self):
        result = []
        for name in ('Joe', 'Jack', 'William', 'Averell'):
            data = []
            for x in range(len(self.categories)):
                data.append(random.randint(0, 10))
            result.append({'name': name, "data": data})
        return result
 
      

The template

 
       {% load staticfiles %}<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="{% static 'js/highcharts/highcharts.js' %}"></script>
    <script type="text/javascript">
    $(function () {
        $.getJSON("{% url 'bar' %}", function(data) {
            $('#container').highcharts(data);
        });
    });
    </script>
</head>
<body>
<div id="container" style="height: 300px"></div>
</body>
</html>
 
      