Django Chart.js 和 Hightchart ajax 视图
项目描述
Django Chartjs 允许您在 Django 应用程序中管理图表。
这与 Chart.js 和 Highcharts JS 库兼容。
使用一组预定义的基于类的视图,您只需编写 SQL 查询即可开始使用。
作者:Rémy Hubscher 和贡献者
许可证:BSD
兼容性:Django 1.10、2.2 和 3.0,python3.6 到 python3.8
入门
安装 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 折线图
就是这么简单!
对于包括 HighCharts 折线图在内的其他示例,请不要犹豫查看演示项目。
另外,请随时贡献您的演示!
项目详情
下载文件
下载适用于您平台的文件。如果您不确定要选择哪个,请了解有关安装包的更多信息。
源分布
django-chartjs-2.3.0.tar.gz
(589.5 kB
查看哈希)
内置分布
django_chartjs-2.3.0-py3-none-any.whl
(609.5 kB
查看哈希)
关
django_chartjs -2.3.0-py3-none-any.whl 的哈希值
算法 | 哈希摘要 | |
---|---|---|
SHA256 | 3cc1660ff1403c021b3ede163062120e36fde194e97e1a84a7eb1a8f09223183 |
|
MD5 | 05402478292b66fb02ed8de04bc22c4c |
|
布莱克2-256 | a1a9a9684ca39c70b84edbf15c7e506fabe46c639806b42d23e6356f2c441af0 |