2014-03-03 47 views
2

我正在嘗試使用django-nvd3與我的django項目,並試圖獲取線圖示例工作。我得到的鉻JS控制檯下面的錯誤,當我的頁面加載:圖表不在django-nvd3中渲染的圖表

Uncaught TypeError: Cannot set property 'monthEnd' of undefined nv.d3.js:115 (anonymous function) nv.d3.js:115 (anonymous function) nv.d3.js:14369 Uncaught TypeError: Object # has no method 'lineChart' (index):13 (anonymous function) (index):13 (anonymous function) nv.d3.js:63

我已基本從這裏複製的代碼: http://django-nvd3.readthedocs.org/en/latest/classes-doc/line-chart.html

我的看法是:

from django.shortcuts import render_to_response, render 
import random 
import datetime 
import time 

def demo_linechart(request): 
    """ 
    lineChart page 
    """ 
    start_time = int(time.mktime(datetime.datetime(2012, 6, 1).timetuple()) * 1000) 
    nb_element = 100 
    xdata = range(nb_element) 
    xdata = map(lambda x: start_time + x * 1000000000, xdata) 
    ydata = [i + random.randint(1, 10) for i in range(nb_element)] 
    ydata2 = map(lambda x: x * 2, ydata) 

    tooltip_date = "%d %b %Y %H:%M:%S %p" 
    extra_serie = {"tooltip": {"y_start": "", "y_end": " cal"}, 
        "date_format": tooltip_date} 
    chartdata = {'x': xdata, 
       'name1': 'series 1', 'y1': ydata, 'extra1': extra_serie, 
       'name2': 'series 2', 'y2': ydata2, 'extra2': extra_serie} 
    charttype = "lineChart" 

    kw_extra = { 
     'x_is_date': True, 
     'x_axis_format':"%d %b %Y", 
    } 

    data = { 
     'charttype': charttype, 
     'chartdata': chartdata, 
     'kw_extra':kw_extra, 
    } 
    return render(request, 'smcore/nvd3.html', data) 

我的HTML是:

{% load static %} 

<link rel="stylesheet" type="text/css" href="{% static 'nvd3/nv.d3.css' %}" /> 
<script type="text/javascript" src='{% static 'smcore/jquery-latest.js' %}'></script> 
<script type="text/javascript" src='{% static 'smcore/d3.min.js' %}'></script> 
<script type="text/javascript" src='{% static 'nvd3/nv.d3.js' %}'></script> 

{% load nvd3_tags %} 
<head> 
    {% load_chart charttype chartdata "linechart_container" kw_extra %} 

    {# {% load_chart charttype chartdata "linechart_container" True '%d %b %Y %H' %}#} 
</head> 
<body> 
    <h1>Fruits vs Calories</h1> 
    {# {% include_container "piechart_container" 400 500 %}#} 
    {% include_container "linechart_container" 400 600 %} 

</body> 

我的網址是:

url(r'testvis/$', temp.demo_linechart, name='testvis'), 

我正在使用 nv.version ='1.1.15b'; d3 = {version:「2.7.0」}; // semver

請幫忙!!

回答

2

對我來說,解決方案是在第一評論從samesense這裏:

https://github.com/areski/django-nvd3/issues/24

即:

data = { 
    'charttype': charttype, 
    'chartdata': chartdata, 
    'extra': {'x_is_date': True, 
    'x_axis_format': "%d %b %Y %H"}, 
    } 
Then you fix the template to make it look like the piechart example. 
Change 
{% load_chart charttype chartdata "linechart_container" True "%d %b %Y %H" %} 
to 
{% load_chart charttype chartdata "linechart_container" extra %}