python之在 Django 中显示 d3 图表

我正在浏览 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 的实现。但是我找不到任何与之相关的东西，作者写的文档我也看不懂。

请告诉我如何将 d3 图表实时包含在 django 框架中。

请您参考如下方法:

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> 中使用tempalte 的部分。第二个标签load_chart将生成您实际创建图表时引用的 javascript。第三个标签 ( include_container ) 将插入所需的 html div元素(你没有在问题中引用)。通过向后面的标签传递相同的名称，浏览器知道在哪个 div 标签上应用 javascript 代码。在模板上分配代码位无济于事。此外，它不会生成代码。这留给了不同的包python-nvd3它本身依赖于一个模板引擎 (Jinja2)，它可能与您在 Django 中使用的引擎不同。 简而言之:django-nvd3 解决了为 nvd3 图表生成 javascript 代码的问题，但没有解决如何在 django 模板中分发该代码的问题。

我建议 Sekizai更好地分配代码位。它允许将页面的 html、css 和 js 位拆分为单独的 block 。然后您可以使用简单的包含将图表添加到您的网页。在包含的文件中，您可以用 {% addtoblock css %} 包围所需的 css 代码。和所需的 javascript {% addtoblock js %} .使用 sekizai 时，基本模板需要定义这些 block (“js”和“css”)，请参阅 Sekizai documentation .

当然这是一个见仁见智的问题，但我更喜欢使用 sekizai 在模板中分发 nvd3.js 代码位，并将图表作为可包含的模板提供给 Django(从而避免了第二个模板引擎的成本)。我的包含模板包含采用的原始 nvd3 代码，例如来自其中一个例子。

我已经编译了三个要点，假设您已经安装了 sekizai 并将其包含在您的 INSTALLED_APPS 中设置:

1. view function 的 Python 代码.记得在 urls.py 中包含 View 函数.该代码假定包含 json 数据的文件位于静态文件夹中。
2. 名为 base.html 的模板其中确实包含要呈现的页面的 html 代码。它有一个标题，然后包含图表。
3. A template for the chart这是问题中代码的 1:1 副本，除了一些参数是动态加载的(源文件，刻度)。