web-dev-qa-db-ja.com

DjangoおよびChartJS

動的データをDjango Chart JSアーキテクチャに組み込むことが可能かどうかを理解しようとしています。いくつかのチュートリアルを経て、最終的にDjango ChartJSを使用して作業し、値をハードコーディングして関連するグラフを表示できると非常に便利です。最終的に私がやろうとしているのは、データベースからの動的データを使用したこの同じ演習です。SOでこの同じ質問を見つけました、 https://stackoverflow.com/questions/47575896/dynamic-chart-using-Django-and-chart-js#= しかし、誰からも回答がありませんでした。これはまさに私が達成しようとしていることです。シリアライザを少し調べましたが、最初にデータをシリアル化する必要がありますか？考えとフィードバックを事前に感謝します。

フィードバックに従って、問題のグラフにコンテキストを追加しましたが、データはまだ通っていません。これが私の見解です：

class ChartView(LoginRequiredMixin, TemplateView):

    model = Myobject 
    template_name = 'director/chart.html'

      def get_context_data(self, **kwargs):
          context = super(ChartView, self).get_context_data(**kwargs)  
          myobject = Myobject.objects.filter(field__in=self.request.user.userprofile.field.all())
          print(myobject)
          context['myobject'] = myobject
          return context

画面が空白になり、グラフがまったく表示されなくなり、何かが明らかに間違っていることを示唆しています。オブジェクトについて通知するために、JavaScriptに追加の変更を加える必要がありますか？私の仮定は「いいえ」であり、この情報ビューにcontext_dataを渡しています。

私はAjaxも使用しているので、それが複雑な要素であるかどうかはわかりません。これが私のJavaScriptです。

<script>
var endpoint = '{% url "myobject:chart_data" %}'
var defaultData = [];
var labels = [];
$.ajax({
    method: "GET",
    credentials: 'same-Origin',
    url: endpoint,
    success: function(data){
        labels = data.labels
        defaultData = data.default
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: [{% for i in myobject %}{{ i.labels }},{% endfor %}],
                datasets: [{
                    data: [{% for i in myobject %}{{ i.data }},{% endfor %}]
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(153, 102, 255, 1)',
                    ],
                    borderWidth: 1
                }]
            }
        })
    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)
    }
})
</script>
djangopython-3.xdjango-modelsdjango-viewschart.js
6
Steve Smith

Chart.jsで動的データをレンダリングするために、必ずしもシリアライザーを使用する必要はありません（希望する場合は可能です）。 Djangoコンテキスト変数を通常のように適切な場所で反復することができます。以下は折れ線グラフの例です。この例をいじってみますが、これは動的に簡単にレンダリングする方法を示しているはずですDjangoコンテキスト変数を含むデータ。

...
<canvas id="funchart" width="75" height="50"></canvas>                      

<script type="text/javascript">  
     var a = document.getElementById('funchart').getContext('2d');
     var myLineChart = new Chart(a, {
               type: 'line',
               data: {
                   labels:[{% for i in myobject %}{{ i.labels }},{% endfor %}],
                   datasets: [{
                        label:'My Dot',
                        data: [{% for i in myobject %}{{ i.data }},{% endfor %}]
                             }]
                      },
               options:{
                   scales: {
                       xAxes: [{
                           display:true
                              }],
                       yAxes: [{
                           ticks: {
                               beginAtZero:true
                                   }
                               }]
                            }
                        }
                      });
</script>
5
HoneyNutIchiros

だから私はここで同じことをやっています、chart.jsのラベルは文字列しか必要ないのでラベルが表示されないと思いますので、ラベルでこれを試してください：

labels: [{% for i in book %}"{{ i.id }}",{% endfor %}]
1
Ega Dharmawan

以下の私のコードは、動的なユーザーデータを取得する方法に関する問題を最終的に解決したものです。私はまだラベルを適切に機能させる方法を理解しようとしています。このソリューションでは、ラベルをID番号で表示できますが、これは最適ではありませんが、ラベルの問題のために別のSO=）を開きました。

私のHTML

   {% extends 'base5.html' %}

{% block body_block %}
<div class="box6">
          <h1 class="title">Number of Books By Author</h1>
<canvas id="myChart"></canvas>
<div>

  <script>
  var endpoint = '{% url "Books:chart_data" %}'
  var defaultData = [];
  var labels = [];
  array = {{ procedures3 }}
  $.ajax({
      method: "GET",
      credentials: 'same-Origin',
      url: endpoint,
      success: function(data){
          defaultData = data.default
          var ctx = document.getElementById("myChart");
          var myChart = new Chart(ctx, {
              type: 'bar',
              data: {
                  labels: [{% for i in book %}{{ i.id }},{% endfor %}],
                  datasets: [{
                      label: "# of Procedures",
                      data: [{% for j in book_count %}
                               {{ j }},
                             {% endfor %}],
                      backgroundColor: [
                          'rgba(255, 99, 132, 0.2)',
                          'rgba(255, 99, 132, 0.2)',
                          'rgba(54, 162, 235, 0.2)',
                          'rgba(255, 206, 86, 0.2)',
                          'rgba(75, 192, 192, 0.2)',
                          'rgba(153, 102, 255, 0.2)',
                          'rgba(255, 159, 64, 0.2)'
                      ],
                      borderColor: [
                          'rgba(255,99,132,1)',
                          'rgba(255,99,132,1)',
                          'rgba(54, 162, 235, 1)',
                          'rgba(255, 206, 86, 1)',
                          'rgba(75, 192, 192, 1)',
                          'rgba(153, 102, 255, 1)',
                          'rgba(255, 159, 64, 1)'
                      ],
                      borderWidth: 1
                  }]
              }
          })
      },
      error: function(error_data){
          console.log("error")
          console.log(error_data)
      },
  })
  </script>
  {% endblock %}

Views.py

ChartView

class ChartData(LoginRequiredMixin,APIView):
    model = Author
    authentication_classes = (SessionAuthentication, BasicAuthentication)
    permission_classes = (IsAuthenticated,)

    def get(self, request, format=None):
        default_items = []
        labels = []
        data = {
            "labels": labels,
            "default": default_items,
        }
        return Response(data)

ChartView

class ChartView(LoginRequiredMixin, TemplateView): template_name = 'Book/chart.html'

def get_context_data(self, **kwargs):
    context = super(ChartView, self).get_context_data(**kwargs)
    book = Author.objects.filter(id__in=self.request.user.userprofile.author.all()).order_by('id')
    books_count = [ Book.objects.filter(author=cls).count() for cls in book ]
    context['book'] = book
    context['book_count'] = books_count
    return context
0
Steve Smith