くださいHighChart

Question

でのチャート表示、現在の年が

チャートはそうのように表示されます：

私はそれが数ヶ月であるx軸に現在の年を表示します。さまざまなソリューションを見ていたが、どれも役に立たなかった。

私はまだこれが初めてであるので、どこが間違っていたのかを見てください。

多くのあなたの助けをよろしく！

Djangoのバージョン：1.10
Pythonバージョン：3.6

---

chartViewHigh.html

{% block main %} 

    <h1 align="center">Analysis</h1> 


{% block content %} 

    <div id="container3" style="width:50%; height:400px;"></div> 

{% endblock %} 

{% block extrajs %} 
<script> 
    var endpoint = '/api/chart/data/'; 

    var labels01 = []; 
    var defaultData01 = []; 
    var labels02 = []; 
    var defaultData02 = []; 
    var labels03 = []; 
    var defaultData03 = []; 
    ... 


$.ajax({ 
    method: "GET", 
    url: endpoint, 
    success: function (data) { 
      labels01 = data.labels01; 
      defaultData01 = data.default01; 
      labels02 = data.labels02; 
      defaultData02 = data.default02; 
      labels03 = data.labels03; 
      defaultData03 = data.default03; 
      labels04 = data.labels04; 
      ... 
      setChart() 
     }, 
     error: function (error_data) { 
      console.log("error"); 
      console.log(error_data) 
     } 
    }); 

     $(function() { 
     $('#container3').highcharts({ 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: 'Members Registration Current Year ' 
      }, 
      credits: { 
       enabled: false 
      }, 
      xAxis: { 
       type:"datetime", 
      dateTimeLabelFormats:{ 
       year: '%Y' 
      }, 
       tickInterval: 1, 
       categories: [ 
        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
       ] 
      }, 
      yAxis: { 
       tickInterval: 1, 
       minRange: 1, 
       title: { 
        text: 'Data' 
       } 
      }, 
      tooltip: { 
       useHTML: true 
      }, 
      plotOptions: { 
       column: { 
        pointPadding: 0.2, 
        borderWidth: 0 
       } 
      }, 
      series: [{ 
       name: 'Total', 
       data: [ 
        defaultData01, 
        defaultData02, 
        defaultData03, 
        defaultData04, 
        defaultData05, 
        defaultData06, 
        defaultData07, 
        defaultData08, 
        defaultData09, 
        defaultData10, 
        defaultData11, 
        defaultData12 
       ] 
      }] 
     }); 
    }); 

---

views.py

class ChartData(APIView): 
    def get(self, request, format=None): 
     today = datetime.date.today() 

     # Months 
     qs_count01 = Member.objects.filter(reg_date__year=today.year, 
             reg_date__month='01').filter(
             association=self.request.user.association).count() 
     qs_count02 = Member.objects.filter(reg_date__year=today.year, 
             reg_date__month='02').filter(
             association=self.request.user.association).count() 
     qs_count03 = Member.objects.filter(reg_date__year=today.year, 
             reg_date__month='03').filter(
             association=self.request.user.association).count() 
     ... 

     labels01 = ["Jan"]    # I tried to add current year here. 
     default_items01 = [qs_count01] 
     labels02 = ["Feb"] 
     default_items02 = [qs_count02] 
     labels03 = ["Mar"] 
     default_items03 = [qs_count03] 
     ... 

     data = { 
      "labels01": labels01, 
      "default01": default_items01, 
      "labels02": labels02, 
      "default02": default_items02, 
      "labels03": labels03, 
      "default03": default_items03, 
      ... 
     } 
     return Response(data) 

Answer 1

Y場合

xAxis: { 
    ... 
    title: { 
     text: new Date().getFullYear() 
    } 
    ... 
}, 

あなたが動的にする年間必要がある場合、あなたはそれを渡すことができます：耳はあなただけで、内蔵使用してJavaScriptのDateオブジェクトグラフのオプションxAxisタイトルセクションに現在の年を挿入することができ、動的である必要はありません。あなたの既存のAJAXコールと一緒に。

views.py

class ChartData(APIView): 
    def get(self, request, format=None): 
    ... 
    data = { 
     "xAxisTitle": 2017 # assign year here dynamically using method of choice 
     ... 
    } 

chartViewHigh.html

<script> 
    ... 
    var xAxisTitle = ""; 
    ... 

    $.ajax({ 
     ... 
     success: function (data) { 
      ... 
      xAxisTitle = data.xAxisTitle; 
      ... 
    }); 

    ... 

     xAxis: { 
     ... 
     title: { 
      text: xAxisTitle 
     } 
     ... 
    },