代码之家 › 专栏 › 技术社区 › Jaffer Wilson Dilip kumar

在django中显示d3图表

d3.js python-3.x django python

Jaffer Wilson Dilip kumar · 技术社区 · 6 年前

我正在浏览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框架中实时加入d3图表。

1 回复 | 直到 4 年前

Fabian 6 年前

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

负载 javascript库 样式表 . (关于如何做到这一点,请参阅相应的文档。)这些元素需要放在模板中的不同位置(图表应该放在html中,css放在标题中,javascript放在正文末尾)。

django-nvd3 include_chart_jscss 将完全做到这一点,并应用于 <head> load_chart 将生成实际创建图表时引用的javascript。第三个标签( include_container )将插入所需的html div 元素(您在问题中没有引用)。通过将后一个标记传递给相同的名称,浏览器知道要在哪个div标记上应用javascript代码。在模板上分发代码位没有帮助。而且,它不会生成代码。这将留给另一个包 python-nvd3

我建议 Sekizai {% addtoblock css %} 以及所需的 javascript作者 {% addtoblock js %} Sekizai documentation

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

INSTALLED_APPS 设置:

用于 view function urls.py . 代码假定包含json数据的文件位于静态文件夹中。
base.html 其中包含要呈现的页面的html代码。它有一个标题,然后包括图表。
A. template for the chart

推荐文章

July · 如何定义数字间隔,然后四舍五入

1 年前

Community wiki · 对象名称前的单下划线和双下划线的含义是什么?

1 年前

Brian Johnson · 为什么在Python中列出字典列表会引发TypeError?[已关闭]

1 年前

user026 · 如何根据特定窗口的平均值(行数)创建新列?

1 年前

Ashok Shrestha · 需要追踪特定的颜色线并获取坐标

1 年前

Nicote Ool · 在FastApi和Vue3中获得422

1 年前

NeoExceptCodeBad · 如果我有很多垂直线,我如何找到它们的边缘?

1 年前

Abdulaziz · 如何对集合内的列表进行排序[重复]

1 年前

user2743931 · 带有src目录的Python setup.py

1 年前

asmgx · 为什么合并数据帧不能按照python中的预期方式工作

1 年前