@@ -142,83 +142,6 @@ django_echarts 提供两种方式的渲染视图,即:
142142 });
143143 </script>
144144
145- 多图表渲染
146- ----------
147-
148- .. versionadded :: 0.3.4
149-
150- 自 v0.3.4 新增 `django_echarts.datasets.charts.NamedCharts ` 用于多图表渲染,该类是对于原有的 `pyecharts.custom.page.Page ` 进行改善,包括:
151-
152- - 增加图表对象命名引用
153- - 移除了 `list ` 的相关方法
154-
155- 基本使用
156- ++++++++
157-
158-
159- 在创建一个 `NamedCharts ` 实例 `charts ` ,后,使用 `add_chart ` 添加一个图表对象,可以使用 `name ` 为之起一个引用名称,如果没有指定引用名称,则使用 c0,c1 命名。
160-
161- ::
162-
163-
164- class MultipleChartsView(EChartsBackendView):
165- echarts_instance_name = 'charts'
166- template_name = 'multiple_charts.html'
167-
168- def get_echarts_instance(self, *args, **kwargs):
169- device_data = models.Device.objects.values('device_type').annotate(count=Count('device_type'))
170- device_types, counters = fetch(device_data, 'device_type', 'count')
171- pie = Pie("设备分类", page_title='设备分类', width='100%')
172- pie.add("设备分类", device_types, counters, is_label_show=True)
173-
174- battery_lifes = models.Device.objects.values('name', 'battery_life')
175- names, lifes = fetch(battery_lifes, 'name', 'battery_life')
176- bar = Bar('设备电量', page_title='设备电量', width='100%')
177- bar.add("设备电量", names, lifes)
178- charts = NamedCharts().add_chart(pie, name='pie').add_chart(bar)
179- return charts
180-
181- 元素访问
182- ++++++++
183-
184- .. versionchanged :: 0.3.5
185- 图表访问方式从 *属性访问 * 改为 *字典访问 * 。
186-
187- 对于 包含若干图表的 `NamedCharts ` 实例,可以像字典一样访问该图表对象。
188-
189- Python 代码的访问方式
190-
191- ::
192-
193- # 访问 pie 对象 page_title
194- print(charts['pie'].page_title)
195-
196- # 访问 bar 对象 page_title
197- print(charts['c1'].page_title) # 推荐
198- print(charts[1].page_title) # 不再推荐
199-
200- 模板代码的访问方式:
201-
202- ::
203-
204- {{ charts.pie.page_title }}
205- {{ charts.c1.page_title }}
206-
207- 注意
208-
209- ::
210-
211- 无论是 Jinja2 模板还是 Django 模板,均不提倡使用 `charts.1` 形式访问列表中的某一个元素。
212-
213- NamedCharts VS Page
214- +++++++++++++++++++
215-
216- `NamedCharts ` 内部使用 `collections.OrderedDict ` 保存图表名称和实例,支持字典访问方式,同时扩展原有的 `Page ` 的列表特性。
217-
218- 具体差别如下表:
219-
220- .. image :: /_static/namedcharts-vs-page.png
221-
222145
223146 模板标签
224147---------
0 commit comments