Question

饼图如下所示：

数据存在于JSON中：

修改

来自控制台：

当我尝试使用“bar”或“column”类型的图表时，它可以正常工作。

还是新手，非常感谢你的帮助，伙计们！

Django版本：1.10
Python版本：3.6

chartViewHigh.html

{% block main %}

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


{% block content %}

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

{% endblock %}

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

   var labels = [];
   var defaultData = [];
   var labels2 = [];
   var defaultData2 = [];

   $.ajax({
      method: "GET",
      url: endpoint,
       /**
        * @param data
        * @param data.labels   
        * @param data.default
        * @param data.default2
       */

       success: function (data) {
            labels = data.labels;
            defaultData = data.default;
            labels2 = data.labels2;
            defaultData2 = data.default2;
            setChart()
        },
        error: function (error_data) {
            console.log("error");
            console.log(error_data)
        }
    });

    function setChart() {
            $(document).ready(function() {
                var chart = {
                     plotBackgroundColor: null,
                     plotBorderWidth: null,
                     plotShadow: false
                };
                var title = {
                     text: 'Total'
                 };
                var tooltip = {
                     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                  };
                var plotOptions = {
                     pie: {
                         allowPointSelect: true,
                         cursor: 'pointer',
                     dataLabels: {
                         enabled: true,
                         format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                          style: {
                              color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                          }
                     }
                }
            };
            var series= [{
               type: 'pie',
               name: 'Group share',
               data: [
                   { name: 'Board',   y: defaultData },
                  {
                     name: 'Member',
                     y: defaultData2,
                     sliced: true,
                     selected: true
                  }
               ]
            }];

            var json = {};
            json.chart = chart;
            json.title = title;
            json.tooltip = tooltip;
            json.series = series;
            json.plotOptions = plotOptions;
            $('#container').highcharts(json);
         });

views.py

 class ChartData(APIView):
     def get(self, request, format=None):
        qs_count = Administrator.objects.filter(association=self.request.user.association).count()
        qs_count2 = Member.objects.filter(association=self.request.user.association).count()

        labels = ["Members"]
        default_items = [qs_count2]
        labels2 = ["Board"]
        default_items2 = [qs_count]

        data = {
           "labels": labels,
           "default": default_items,
           "labels2": labels2,
           "default2": default_items2
        }
        return Response(data)

Answer 1

数据阵列的格式不正确。 y值必须是数字，您可以将它们设置为数组。

将系列变量更改为：

 var series= [{
           type: 'pie',
           name: 'Group share',
           data: [{ 
       name: 'Board',   
       y: defaultData[0] },
              {
                 name: 'Member',
                 y: defaultData2[0],
                 sliced: true,
                 selected: true
              }
           ]
        }];

或者将这些值作为单个数字而不是数组发送。

Answer 2

您希望在图表部分中遗漏一个饼图声明。

           var chart = {
                 plotBackgroundColor: null,
                 plotBorderWidth: null,
                 plotShadow: false,
                 type: 'pie' // this is missing.
            };

无法运行您的代码进行测试但是手指越过这个就为您排序了。

HighChart饼图不显示任何数据

2 个答案: