来自django查询的json的Highcharts未呈现

问题描述 投票：1回答：3

我正在关注这个article来渲染来自django查询的json数据的高图。但是，图表未呈现，但在检查源时，我没有从Django或客户端收到任何错误。感谢是否有人可以指出错误。先感谢您。

我正在使用django 2.0和python3.5

models.朋友

  PLATFORM = (
    ('ipcore','IPCORE'),
    ('metro','METRO E'),
    ('edge','EDGE'),
    ('access','ACCESS'),
    ('voice','VOICE'),
    ('system','SYSTEM'),
    ('iptv','IPTV'))

 class Contract(models.Model):
  vendor_name = models.ForeignKey(Vendor, on_delete=models.CASCADE)
  name = models.CharField(max_length=500)
  contract_no = models.CharField(max_length=100, blank=True)
  partner_name = models.CharField(max_length=200, blank=True)
  value = models.DecimalField(max_digits=11, decimal_places=2, 
          blank=True, null=True)
  platform = models.CharField(max_length=100, blank=True, 
          choices=PLATFORM)

views.朋友

 def json_example(request):
     return render(request, 'app/json_example.html')

 def chart_data(request):
     dataset=Contract.objects.all().values('platform').
         exclude(platform='').annotate(Sum('value')).order_by('value__sum')
     platform_name = dict()
     for platform_tuple in Contract.PLATFORM:
     platform_name[platform_tuple[0]] = platform_tuple[1]

     chart = {
         'chart': {'type': 'pie'},
         'title': {'text': 'Contract Value for Every platform'},
         'series': [{
               'name': 'Platform',
               'data': list(map(lambda row: {'name': 
                platform_name[row['platform']], 
               'y': row['value__sum']}, dataset))
          }]
     }
     return JsonResponse(chart)

URLs.朋友

 url('json_example/', views.json_example, name='json_example'),
 url('json_example/data/', views.chart_data, name='chart_data'),

json_example.html

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>Contract Inventory Highcharts Example</title>
 </head>
 <body>
     <div id="container" data-url="{% url 'chart_data' %}"></div>
     <script src="https://code.highcharts.com/highcharts.src.js"></script>
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script>
        $.ajax({
           url: $("#container").attr("data-url"),
           dataType: 'json',
           success: function (data) {
             Highcharts.chart("container", data);
           }
        });
      </script>
  </body>
  </html>

这是来自数据集的json数据。

 [{"platform": "IPTV", "value__sum": "0.00"}, {"platform": "METRO E", "value__sum": "71372564.20"}, {"platform": "EDGE", "value__sum": "73867073.63"}, {"platform": "SYSTEM", "value__sum": "135465418.85"}, {"platform": "IPCORE", "value__sum": "467810178.41"}]
json django python-3.x highcharts
3个回答
0
投票

这是来自数据集的json数据。

 [{"platform": "IPTV", "value__sum": "0.00"}, {"platform": "METRO E", "value__sum": "71372564.20"}, {"platform": "EDGE", "value__sum": "73867073.63"}, {"platform": "SYSTEM", "value__sum": "135465418.85"}, {"platform": "IPCORE", "value__sum": "467810178.41"}]

您的json数据不包含图表选项。它应该是这样的：

'{"title":{"text":"Title"},"series":[{"name":"Installation","data":[43934,52503,57177,69658,97031,119931,137133,154175]}]}'

更重要的是，在将json传递给Highcharts构造函数之前，你应该将json解析为js对象：

  <script>
    $.ajax({
       url: $("#container").attr("data-url"),
       dataType: 'json',
       success: function (data) {
         var chartData = JSON.parse(data);
         Highcharts.chart("container", chartData);
       }
    });
  </script>

检查示例：

0
投票

您必须以这样的方式格式化数据，使其与highcharts绘图对象匹配。请查看以下代码。

data =  [
    {"platform": "IPTV", "value__sum": "0.00"},
    {"platform": "METRO E", "value__sum": "71372564.20"},
    {"platform": "EDGE", "value__sum": "73867073.63"},
    {"platform": "SYSTEM", "value__sum": "135465418.85"},
    {"platform": "IPCORE", "value__sum": "467810178.41"}];

x_axis_data = [];
y_axis_data = [];

for(index=0; index < data.length; index++) {
  item = data[index];
  x_axis_data.push(item['platform'])
  y_axis_data.push(parseFloat(item['value__sum']))
}

Highcharts.chart('container', {
    title: {
       text: 'learnbatta.com'
    },
    xAxis: {
        title: {
            text: 'X Value'
        },
        categories: x_axis_data
    },
    yAxis: {
        title: {
            text: 'Y Value'
        },
    },
    
    series: [{
        name: 'Curve',
        data: y_axis_data
    }]
});
<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div id="container"></div>
</body>

</html>

您必须更新您的代码，如下所示

<script>
    $.ajax({
       url: $("#container").attr("data-url"),
       dataType: 'json',
       success: function (data) {
         var data = JSON.parse(data);
         x_axis_data = [];
         y_axis_data = [];

         for(index=0; index < data.length; index++) {
           item = data[index];
           x_axis_data.push(item['platform'])
           y_axis_data.push(parseFloat(item['value__sum']))
         }

         Highcharts.chart('container', {
            title: {
               text: 'learnbatta.com'
            },
            xAxis: {
                title: {
                    text: 'X Value'
                },
                categories: x_axis_data
            },
            yAxis: {
                title: {
                    text: 'Y Value'
                },
            },

            series: [{
                name: 'Curve',
                data: y_axis_data
            }]
        });

       }
    });
</script>
0
投票

我已经设法通过使用django rest API和我的模板相应更新我的views.py来解决它。这是我更新的代码：

views.朋友

  from rest_framework.views import APIView
  from rest_framework.response import Response

  class ChartView(View):
     def get(self, request, *args, **kwargs):
     return render(request, 'app/charts.html')

  class ChartData(APIView):
     authentication_classes = []
     permission_classes = []

     def get(self, request, format=None):
        totalvendor= Contract.objects.all().values("vendor_name_id__name").
           annotate(Count("id")).order_by('-id__count')[:8]
        labels = totalvendor.values_list('vendor_name_id__name')
        default_items = totalvendor.values_list('id__count', flat=True)
        default_items = list(default_items)
        data = {
            "labels": labels,
            "default": default_items,
        }
        return Response(data)

将数组从queryset传递给模板和js

这是我的urls.py

 url(r'^chart/', views.ChartView.as_view(), name='chart'),
 url(r'^api/chart/data/$', ChartData.as_view(), name='chartdata'),

这是我的chart.html代码

<script>
{% block jquery %}
var endpoint = '/api/chart/data/'
var defaultData = []
var labels = [];



$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){
        labels = data.labels
        defaultData = data.default
        setChart()
    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)
    }
})

function setChart(){
    var ctx = document.getElementById("myChart");
    var ctx2 = document.getElementById("myChart2");
    var myChart = new Chart(ctx2, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Value Contract for Platform',
            data: defaultData,
            backgroundColor: [
                '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(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
        }]
    },
    options: {
        title:{
            display:true,
            text:'Count Contract for Every Platform',
            fontSize:18,
            position:'top'
        },
        legend:{
            display:false,
            position:'right',
            labels:{
                fontColor:'#000'
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
    var myChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: labels,
        datasets: [{
            label: 'Count Contract for Platform',
            data: defaultData,
            backgroundColor: [
                '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(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
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
}
// var ctx = document.getElementById("myChart");
{% endblock %}
</script>

{% block content %}

<div class='row'>
    <div class='col-sm-12' url-endpoint='{% url "chartdata" %}'>
        <h1>Data Presentation</h1>
        <div class=''>
        <div class='col-sm-6'>
            <canvas id="myChart" width="400" height="400"></canvas>
        </div>
        <div class='col-sm-6'>
            <canvas id="myChart2" width="400" height="400"></canvas>
        </div>
        </div>


    </div>
</div>

{% endblock content %}

无论如何，感谢那些回答我问题的人

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.