Chartkick.py

用一行Python创建美丽的JavaScript图表。不再需要与图表库搏斗！

看看它的实际应用

Chartkick.py 1.0最近发布了 - 查看 如何升级

快速入门

运行

pip install chartkick

然后按照您的Web框架的说明进行操作

• Django
• Flask

这设置了Chartkick与Chart.js。对于其他图表库，请参阅 这些说明。

Django

将以下内容添加到 settings.py 中的 INSTALLED_APPS

INSTALLED_APPS = [
    'chartkick.django',
    # ...
]

加载JavaScript

{% load static %}

<script src="{% static 'chartkick/Chart.bundle.js' %}"></script>
<script src="{% static 'chartkick/chartkick.js' %}"></script>

在视图中创建一个图表

from chartkick.django import PieChart

def index(request):
    chart = PieChart({'Blueberry': 44, 'Strawberry': 23})
    return render(request, 'home/index.html', {'chart': chart})

并将其添加到模板中

{{ chart }}

Flask

注册蓝图

from chartkick.flask import chartkick_blueprint

app.register_blueprint(chartkick_blueprint)

加载JavaScript

<script src="{{ url_for('chartkick.static', filename='Chart.bundle.js') }}"></script>
<script src="{{ url_for('chartkick.static', filename='chartkick.js') }}"></script>

在路由中创建一个图表

from chartkick.flask import PieChart

def index():
    chart = PieChart({'Blueberry': 44, 'Strawberry': 23})
    return render_template('home/index.html', chart=chart)

并将其添加到模板中

{{ chart }}

图表

折线图

LineChart({'2023-01-01': 11, '2023-01-02': 6})

饼图

PieChart({'Blueberry': 44, 'Strawberry': 23})

柱状图

ColumnChart({'Sun': 32, 'Mon': 46, 'Tue': 28})

条形图

BarChart({'Work': 32, 'Play': 1492})

面积图

AreaChart({'2021-01-01': 11, '2021-01-02': 6})

散点图

ScatterChart([[174.0, 80.0], [176.5, 82.3]], xtitle='Size', ytitle='Population')

地理图表 - Google Charts

GeoChart({'United States': 44, 'Germany': 23, 'Brazil': 22})

时间轴 - Google Charts

Timeline([['Washington', '1789-04-29', '1797-03-03'], ['Adams', '1797-03-03', '1801-03-03']])

多个序列

data = [
    {'name': 'Workout', 'data': {'2021-01-01': 3, '2021-01-02': 4}},
    {'name': 'Call parents', 'data': {'2021-01-01': 5, '2021-01-02': 3}}
]
LineChart(data)

数据

数据可以是字典、列表或URL。

字典

LineChart({'2023-01-01': 2, '2023-01-02': 3})

列表

LineChart([['2023-01-01', 2], ['2023-01-02', 3]])

URL

使您的页面加载超级快并停止担心超时。为每个图表提供一个自己的端点。

LineChart('/charts/tasks')

选项

宽度和高度

LineChart(data, width='800px', height='500px')

最小和最大值

LineChart(data, min=1000, max=5000)

min 对于非负值图表默认为0。使用 None 让图表库来决定。

轴的最小和最大值 - Chart.js

LineChart(data, xmin='2021-01-01', xmax='2022-01-01')

颜色

LineChart(data, colors=['#b00', '#666'])

堆叠柱状图或条形图

ColumnChart(data, stacked=True)

离散轴

LineChart(data, discrete=True)

标签（用于单序列）

LineChart(data, label='Value')

轴标题

LineChart(data, xtitle='Time', ytitle='Population')

点与点之间使用直线而非曲线

LineChart(data, curve=False)

隐藏点

LineChart(data, points=False)

显示或隐藏图例

LineChart(data, legend=False)

指定图例位置

LineChart(data, legend='bottom')

饼图

PieChart(data, donut=True)

前缀，对货币有用 - Chart.js, Highcharts

LineChart(data, prefix='$')

后缀，对百分比有用 - Chart.js, Highcharts

LineChart(data, suffix='%')

设置千位分隔符 - Chart.js, Highcharts

LineChart(data, thousands=',')

设置小数分隔符 - Chart.js, Highcharts

LineChart(data, decimal=',')

设置有效数字 - Chart.js, Highcharts

LineChart(data, precision=3)

设置舍入 - Chart.js, Highcharts

LineChart(data, round=2)

显示无意义的零，对货币有用 - Chart.js, Highcharts

LineChart(data, round=2, zeros=True)

友好的字节大小 - Chart.js

LineChart(data, bytes=True)

指定数据加载时的消息

LineChart(data, loading='Loading...')

指定数据为空时的消息

LineChart(data, empty='No data')

每 n 秒从远程源刷新数据

LineChart(url, refresh=60)

您可以使用以下方式直接将选项传递给图表库

LineChart(data, library={'backgroundColor': '#eee'})

有关更多信息，请参阅Chart.js、Google Charts 和 Highcharts 的文档。

要在 Chart.js 中自定义数据集，请使用

LineChart(data, dataset={'borderWidth': 10})

您也可以将此选项传递给单个序列。

多个序列

您可以将一些选项与一个序列一起传递

• 名称
• 数据
• 颜色
• dataset - 仅限 Chart.js
• points - 仅限 Chart.js
• curve - 仅限 Chart.js

代码

如果您想直接使用图表库，请使用以下方式获取代码

LineChart(data, code=True)

代码将被记录到 JavaScript 控制台。JavaScript 函数无法记录，因此可能不完全相同。

下载图表

仅限 Chart.js

使用户能够下载图表。这一切都在浏览器中完成 - 无需服务器端代码。

LineChart(data, download=True)

Safari 将在新窗口中打开图片而不是下载。

设置文件名

LineChart(data, download={'filename': 'boom'})

设置背景颜色

LineChart(data, download={'background': '#ffffff'})

设置标题

LineChart(data, title='Awesome chart')

其他图表库

• Google Charts
• Highcharts

Google Charts

加载JavaScript

Django

{% load static %}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="{% static 'chartkick/chartkick.js' %}"></script>

Flask

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="{{ url_for('chartkick.static', filename='chartkick.js') }}"></script>

Highcharts

下载 highcharts.js 并加载 JavaScript

Django

{% load static %}

<script src="{% static 'highcharts.js' %}"></script>
<script src="{% static 'chartkick/chartkick.js' %}"></script>

Flask

<script src="{{ url_for('static', filename='highcharts.js') }}"></script>
<script src="{{ url_for('chartkick.static', filename='chartkick.js') }}"></script>

多个库

如果加载了多个图表库，请使用以下方式选择它们

LineChart(data, adapter='google')  # or highcharts or chartjs

致谢

感谢Mher Movsisyan 创建 初始版本。

升级

1.0

对于 Django，在 settings.py 中的 INSTALLED_APPS 下将 chartkick 更改为 chartkick.django 并从 STATICFILES_DIRS 中删除 chartkick.js()。然后更新图表以使用类。

from chartkick.django import LineChart

LineChart({'2023-01-01': 11, '2023-01-02': 6})

对于 Flask，切换到 包含的蓝图（在 1.0.1 中提供）。然后更新图表以使用类。

from chartkick.flask import LineChart

LineChart({'2023-01-01': 11, '2023-01-02': 6})

历史

查看 变更日志

贡献

鼓励每个人帮助改进这个项目。以下是一些您可以帮助的方式

• 报告错误
• 修复错误并 提交拉取请求
• 编写、澄清或修复文档
• 建议或添加新功能

要开始开发

git clone https://github.com/ankane/chartkick.py.git
cd chartkick.py
pip install -r requirements.txt
pytest