Question

我试图用angularJS制作一些图表。我使用$temp_array=array(); foreach($fruits as $key=>$value){ if($key=="blue") $key="yellow"; $temp_array[$key]=$value; } $fruits=$temp_array;和django将django和angular混合在一起。我使用它是因为我认为它对表单验证非常方便。在这里，我有点卡住了。

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

urls.py

djng

view.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'),
]

plot.html

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

plot.js

{% 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>

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

我不知道自己做错了什么。似乎即使是范围也不能被视为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); }; });，而.labels并不能为我提供任何帮助。我想知道这与我滥用.series

有什么关系

Django和AngularJS相当混乱

0 个答案: