2

我正在尝试用 angularJS 制作一些图表。我正在使用djangoanddjng将 django 和 angular 混合在一起。我使用它是因为我认为它对于表单验证非常方便。在这里我有点卡住了。

我认为 angularJS 部分正在工作（http://plnkr.co/edit/oOBYkkPhG6PWpkkxITKK?p=preview）

网址.py

from django.conf.urls import url
from . import views
from django.contrib.auth import views as auth_views

urlpatterns = [
    url(r'^connexion/$', views.connexion, name='connect'),
    url(r'^logout/$', views.deconnexion, name='deconnect'),
    url(r'^plot/$', views.plot, name='plot'),
]

视图.py

def plot(request):
    return render(request, 'data/plot.html', locals())

绘图.html

{% load static djng_tags %}
{% load bootstrap3 staticfiles%}
{% load bootstrap3 %}

<html lang="en" ng-app="plunker">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>



    <link rel="stylesheet" href='{% static "data/css/angular-chart.css" %}'>
    <link rel="stylesheet" href='{% static "djng/css/styles.css" %}' rel="stylesheet" />
    <link rel="stylesheet" href='{% static "djng/css/bootstrap3.css" %}' rel="stylesheet" />
    <link rel="stylesheet" href='{% static "data/css/data.css" %}'>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/{% block angular_version %}1.3.20{% endblock %}/angular.min.js" type="text/javascript"></script>

     <script src="{% static 'djng/js/django-angular.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'data/js/chart.js'%}"></script>
    <script src="{% static 'data/js/plot.js'%}"></script>
    <script src="{% static 'data/js/angular-chart.js'%}"></script>
    <script type="text/javascript">
    </script>
  <body ng-controller="LineCtrl">
    <div class="container">
    <p>Hello {{data}}!</p>
        <p>Hello {{series}}!</p>

    <p>Hello {{labels}}!</p>


<canvas id="line" class="chart chart-line" chart-data="data"
  chart-labels="labels" chart-legend="true" chart-series="series"
  chart-click="onClick" >
</canvas> 


  </body>
</html>

情节.js

var app=angular.module("plunker", ["chart.js"]);
app.controller("LineCtrl", function ($scope) {

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
});

chart.js 和 angular-chart.js 位于我的 data/static/data/js 或 css 文件夹中。它们已从官方 github 下载。

我不知道我做错了什么。似乎连范围都不能被解读为.labels也.series没有得到任何东西。我想知道这是否与我滥用有关djng

4

0 回答 0