如何用Django-nvd3绘制圆环图

时间:2015-05-08 14:29:43

标签: javascript css nvd3.js

我使用django-nvd3作为可视化库,它们提供有限数量的受支持图表。 有没有办法自定义文档中提供的PieChart,作为圆环图。

def statistics(request):
context=RequestContext(request)


xdata = ["Apple", "Apricot", "Avocado", "Banana", "Boysenberries", "Blueberries", "Dates", "Grapefruit", "Kiwi", "Lemon"]
ydata = [52, 48, 160, 94, 75, 71, 490, 82, 46, 17]
chartdata = {'x': xdata, 'y': ydata}
charttype = "pieChart"
chartcontainer = 'piechart_container'
data = {
    'charttype': charttype,
    'chartdata': chartdata,
    'chartcontainer': chartcontainer,
    'extra': {
        'x_is_date': False,
        'x_axis_format': '',
        'tag_script_js': True,
        'jquery_on_ready': False,
    }
}
return render_to_response('App/statistics.html',data)

我可以通过以下方式设置来更改图表的大小:

{% include_container chartcontainer 426 400 %}

1 个答案:

答案 0 :(得分:0)

我自己只是偶然发现了这个问题。所以迟到总比没有好......

我只是看了JS的甜甜圈与普通(found here)的代码差异,并注意到4个额外的设置。

data

所以我将它们放入def statistics(request): context=RequestContext(request) xdata = ["Apple", "Apricot", "Avocado", "Banana", "Boysenberries", "Blueberries", "Dates", "Grapefruit", "Kiwi", "Lemon"] ydata = [52, 48, 160, 94, 75, 71, 490, 82, 46, 17] chartdata = {'x': xdata, 'y': ydata} charttype = "pieChart" chartcontainer = 'piechart_container' data = { 'charttype': charttype, 'chartdata': chartdata, 'chartcontainer': chartcontainer, 'extra': { 'x_is_date': False, 'x_axis_format': '', 'tag_script_js': True, 'jquery_on_ready': False, 'donut':True, 'donutRatio':0.35, 'chart_attr':{ 'labelThreshold':0.5, 'labelType':'\"percent\"', } } } return render_to_response('App/statistics.html',data) 的“额外”部分,这似乎有效。

编辑:我注意到标签设置没有生效。 在浏览了几次页面源代码和nvd3_tags.py之后,我意识到你需要引用labelType并将它们嵌入另一个名为chart_attr的字典中。见下文。

$('foo\\-bar')