时间戳

首页 > 解决方案 > 来自 django 查询的带有 json 的 Highcharts 未呈现

json - 来自 django 查询的带有 json 的 Highcharts 未呈现

问题描述

我正在关注这篇文章，以使用来自 django 查询的 json 数据呈现 highchart。但是图表未呈现，但在检查源代码时我没有从 Django 或客户端收到任何错误。感谢是否有人可以指出错误。先感谢您。

我正在使用 django 2.0 和 python3.5

模型.py

  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)

视图.py

 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)

网址.py

 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"}]

标签： jsondjangopython-3.xhighcharts

解决方案

这是来自数据集的 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 解析为 js 对象，然后再将其传递给 Highcharts 构造函数：

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

检查示例：

推荐阅读