djang显示d3图

2024-04-27 00:52:39 发布

您现在位置：Python中文网/ 问答频道 /正文
1639 3

我正在浏览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;
  });
});

图像是这样的：
enter image description here

请在此处查看实时演示：http://nvd3.org/examples/cumulativeLine.html

json文件在这里：Json file for example
现在我愿意在django示例中包含这样的图表。所以我继续检查Django-NVD3的实现。但我找不到任何与此相关的东西，而且作者所写的文档也不为我所理解。在

请让我知道如何在django框架中实时包含d3图表。在


Tags： djangojsonformatdatareturn图书馆is网站
1条回答
网友
1楼 · 发布于 2024-04-27 00:52:39

Django在很大程度上是python的后端框架。这意味着它会创建对html请求的响应。这些响应使用包含动态创建的html代码的模板呈现。在

nvd3.js或d3.js在前端（即用户的浏览器）上直播。这意味着所有的nvd3.js html和javascript代码（如您引用的代码）都将进入Django模板。在

要使用nvd3.js，您必须加载d3.js和nvd3.js的javascript库和相应的样式表。（关于如何做到这一点，请参阅相应的文档。）这些元素需要放到模板中的另一个位置（图表应该放在html中，css放在标题中，javascript放在正文的末尾）。在

django是用来简化django的应用程序。使用Django和nvd3.js是一种选择。它定义的模板标记将包括模板中所需的javascript代码和样式表。第一个标记include_chart_jscss正是这样做的，它应该在tempalte的<head>部分中使用。第二个标记load_chart将生成实际创建图表时引用的javascript。第三个标记（include_container）将插入所需的html div元素（您在问题中没有引用这些元素）。通过将后一个标记传递给相同的名称，浏览器就知道要在哪个div标记上应用javascript代码。在模板上分发代码位没有帮助。而且，它不会生成代码。这就留给另一个包python-nvd3，它本身依赖于一个模板引擎（Jinja2），它可能与Django使用的不同。简而言之：django-nvd3解决了为nvd3图表生成javascript代码的问题，但解决了如何在django模板中分发这些代码的问题。

我建议Sekizai更好地分配代码位。它允许将页面的html、css和js位分割成单独的块。然后可以使用简单的includes将图表添加到网页中。在包含的文件中，您可以用{% addtoblock css %}将所需的css代码和 由{% addtoblock js %}编写的javascript。当使用sekizai时，基本模板需要定义这些块（“js”和“css”），请参见Sekizai documentation。在

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

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

  1. view function的Python代码。记住在urls.py中包含view函数。代码假设包含json数据的文件位于静态文件夹中。在
  2. 一个名为^{}的模板，其中包含要呈现的页面的html代码。它有一个标题，然后包括图表。在
  3. 一个template for the chart，它是问题中代码的1:1副本，但某些参数是动态加载的（源文件，ticks）。在

相关问题 更多 >

    编程相关推荐