在 django 中显示 d3 图表
Jaf*_*son 2 python django python-3.x d3.js
我正在浏览图书馆 NVD3 并在网站上找到了这个例子：
d3.json('cumulativeLineData.json', function(data) {
nv.addGraph(function() {
var chart = nv.models.cumulativeLineChart()
.x(function(d) { return d[0] })
.y(function(d) { return d[1]/100 }) //adjusting, 100% is 1.00, not 100 as it is in the data
.color(d3.scale.category10().range())
.useInteractiveGuideline(true)
;
chart.xAxis
.tickValues([1078030800000,1122782400000,1167541200000,1251691200000])
.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis
.tickFormat(d3.format(',.1%'));
d3.select('#chart svg')
.datum(data)
.call(chart);
//TODO: Figure out a good way to do this automatically
nv.utils.windowResize(chart.update);
return chart;
});
});
图像是这样的：
在此处查看现场演示：http : //nvd3.org/examples/cumulativeLine.html
json 文件在这里：Json file for example
现在我愿意在 django 示例中包含这样的图表。所以我继续检查Django-NVD3的实现。但是我找不到任何与之相关的内容，而且我不理解作者编写的文档。
请让我知道如何在 django 框架中实时包含 d3 图表。
Django 主要是 Python 的后端框架。这意味着它创建对 html 请求的响应。这些响应是使用包含动态创建的 html 代码的模板呈现的。
nvd3.js 或 d3.js 在前端，即用户的浏览器。这意味着所有 nvd3.js html 和 javascript 代码（如您引用的代码）都进入Django 模板。
要使用 nvd3.js，您必须加载d3.js 和 nvd3.js javascript 库以及相应的样式表。（有关如何执行此操作，请参阅相应的文档。）这些元素需要转到模板中的不同位置（图表应该放在的 html，将 css 放入标题，将 javascript 放入正文末尾）。
django-nvd3是一个django app，用于简化前端nvd3的使用。使用 Django 和 nvd3.js 是一种选择。它定义了模板标签，这些标签将在您的模板中包含所需的 javascript 代码和样式表。第一个标签include_chart_jscss将完全做到这一点，并且应该<head>在模板的部分中使用。第二个标签load_chart将生成您在实际创建图表时引用的 javascript。第三个标签 ( include_container) 将插入所需的 htmldiv元素（您没有在问题中引用）。通过将后面的标签传递给相同的名称，浏览器知道在哪个 div 标签上应用 javascript 代码。在模板上分配代码位无济于事。此外，它不会生成代码。这是留给不同的包python-nvd3它本身依赖于一个模板引擎（Jinja2），它可能与你在 Django 中使用的不同。简而言之：django-nvd3 解决了为 nvd3 图表生成 javascript 代码的问题，但没有解决如何在 django 模板中分发该代码的问题。
我建议Sekizai更好地分配代码位。它允许在单独的块中拆分页面的 html、css 和 js 位。然后您可以使用简单的包含将图表添加到您的网页。在包含的文件中，您可以用 包围所需的 css 代码，用 包围{% addtoblock css %}所需的 javascript {% addtoblock js %}。使用 sekizai 时，基本模板需要定义这些块（“js”和“css”），请参阅Sekizai 文档。
当然，这是一个见仁见智的问题，但我更喜欢使用 sekizai 来分发模板中的 nvd3.js 代码位，并将图表作为可包含的模板提供给 Django（从而避免第二个模板引擎的成本）。我的包含模板包含采用的原始 nvd3 代码，例如来自示例之一。
我已经编译了三个要点，假设您已经安装了 sekizai 并包含在您的INSTALLED_APPS设置中：
- 视图函数的Python 代码。请记住在
urls.py. 该代码假定带有 json 数据的文件位于静态文件夹中。 - 调用的模板
base.html确实包含要呈现的页面的 html 代码。它有一个标题，然后包括图表。 - 图表的模板，它是问题中代码的 1:1 副本，除了一些参数是动态加载的（源文件、刻度）。
| 归档时间： |
|
| 查看次数： |
3785 次 |
| 最近记录： |