Question

尝试使用下面的代码破解一个简单的django-graphos示例。但是我得到了“Uncaught ReferencError $”未定义＆＃39;在Chrome检查器中 - 红色错误点显示在$（function（）{ - 并且没有图表出现之后，虽然看起来模板正在正确生成，如下面的检查器输出中所示（没有足够的＆＃39;发布图片的声誉。）

Chrome Inspector输出：

<html>
<h1>- Django-graphos Chart 1 - </h1>
<head>
        <script type = "text/javascript" src = "js/jquery-1.11.2.js"></script>
        <script src = "js/flot/jquery.flot.js"></script>
     <div id="xlZGoSiTTr" style="width:800px;height:400px;"></div>
<script type="text/javascript">
$(function () {
    $.plot(
        $("#xlZGoSiTTr"), 
        [{"data": [["2004", 1000], ["2005", 1170], ["2006", 660], ["2007", 1030]], "label": "Sales"}, {"data": [["2004", 400], ["2005", 460], ["2006", 1120], ["2007", 540]], "label": "Expenses"}], 
        {"series": {"lines": {"show": "true"}}, "legend": {"position": "ne"}, "title": "Chart"}
    );
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>

views.py：

from django.shortcuts import render

from django.http import HttpResponse
from django.template import RequestContext, loader
from graphos.sources.simple import SimpleDataSource
from graphos.renderers import flot
from django.shortcuts import render_to_response


def do_graph(request):
    # get data
    data = [
    ['Year', 'Sales', 'Expenses'],
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540]
    ]
    chart = flot.LineChart(SimpleDataSource(data=data))
    #context = RequestContext( request, `enter code here`{'chart':chart.as_html(),'data':data})
    #template = loader.get_template('chart.html')
    #return HttpResponse(template.render(context))
    #return render(request, 'chart.html')
    return render_to_response('chart.html', {'chart': chart})

chart.html：

<html>
<h1>- Django-graphos Chart 1 - </h1>
<head>
        <script type = "text/javascript" src = "{{ STATIC_URL }}js/jquery-1.11.2.js"></script>
        <script type = "text/javascript" src = "{{ STATIC_URL }}js/flot/jquery.flot.js"></script>
     {{chart.as_html}}
</head>
<body>
<div id="container"></div>
</body>
</html>

这两个javascript文件似乎正常，两个文件的django开发服务器返回状态200。似乎无法为django-graphos找到一个简单的工作示例，因此任何有关修复的建议都将受到赞赏。祝福，罗恩。

Answer 1

回答我自己的问题！问题只是访问jquery javascript文件的坏表达，尽管nginx日志表明文件已被检索，即200状态。

以下是可行的语法（自原始问题以来添加了更多代码以运行各种Flot功能）

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.tab { margin-left: 220px; }
</style>
        <script type = "text/javascript" src = "/static/js/jquery-1.11.2.js"></script>
        <script type = "text/javascript" src = "/static/js/flot/jquery.flot.js"></script>
        <script type = "text/javascript" src = "/static/js/flot/jquery.flot.time.js"></script>
        <script type = "text/javascript" src="/static/js/flot/date.js"></script>
        <script type = "text/javascript" src="/static/js/flot/jquery.flot.axislabels.js"></script>
<p class="tab"><font size=28 color="red">- Tank Water Level - </font></p>
        {{chart.as_html}}
</head>
<body>

</body>
</html>

views.py文件是正确的。它现在使用Flot图表选项，如下所示。 get_table（）函数只返回一个n x 2数据矩阵，第一行包含字段名称。

def do_graph(request):
    # get data
    data = get_table()
    chart = flot.LineChart(SimpleDataSource(data=data),options={'series':{'color':'orange'}, 'lines': {'lineWidth': 2, 'fill':1, 'fillColor': {'colors':["rgba(0, 0, 153, 0.4)","rgba(255, 255, 255,0.4)"]} }, 'points':{'symbol':'circle'},'xaxis':{'mode':'time', 'timezone':'browser', 'axisLabel':'Date Time', 'axisLabelUseCanvas':'true', 'axisLabelFontSizePixels': 20,'axisLabelFontFamily':'Arial','color':'red'},'yaxis':{'min':50, 'max':400, 'tickSize': 50, 'axisLabel':'Centimeters', 'axisLabelUseCanvas':'true', 'axisLabelFontSizePixels': 20,'axisLabelFontFamily':'Arial'},'grid':{'color':800}})
    return render_to_response('chart.html', {'chart': chart})

Flot选项和其他jquery插件生成一个图表，在x轴上正确显示日期时间，数据的第一列包含javascript时间戳。使用附加的“axislabels”jquery flot插件绘制轴标签。

祝福罗恩

django-graphos，如何让实例工作？

1 个答案: