如何使图表在Highchart x-Axis中显示当月的当月?

时间:2017-05-17 11:19:33

标签: javascript django python-3.x highcharts

图表看起来像这样:

enter image description here

在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: 'Total Monthly Registration'
            },
            xAxis: {
                categories: [
                    'Group'
                ]
            },
            yAxis: {
                tickInterval: 1,
                minRange: 1,
                title: {
                    text: 'Data'
                }
            },
            tooltip: {
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
              series: [{
                name: labels01 ,
                data: defaultData01

            },{
                name: labels02,
                data: defaultData02

            },{
                name: labels03,
                data: defaultData03

            },{
                name: labels04,
                data: defaultData04

            },{
                name: labels05,
                data: defaultData05
            },{
                name: labels06,
                data: defaultData06
            },{
                name: labels07,
                data: defaultData07
            },{
                name: labels08,
                data: defaultData08
            },{
                name: labels09,
                data: defaultData09
            },{
                name: labels10,
                data: defaultData10
            },{
                name: labels11,
                data: defaultData11
            },{
                name: labels12,
                data: 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)

0 个答案:

没有答案