如何加载JSON格式的highchart - django app。

Question

我正在做django项目

我想做一个highchart依赖轮，但我不知道为什么图表不显示，你会看到我的代码如下，在我的 dependencywheel.html 我已经做了 {%load static%} 在上面

<script>
        Highcharts.chart('container', {

        title: {
        text: 'Highcharts Dependency Wheel'
        },

        accessibility: {
        point: {
            valueDescriptionFormat: '{index}. From {point.exped} to {point.destin}: {point.count}.'
        }
        },

        series: [{
        keys: ['exped', 'destin', 'count'],
        data: '{%url "data"%}',
        type: 'dependencywheel',
        name: 'Dependency wheel series',
        dataLabels: {
            color: '#333',
            textPath: {
            enabled: true,
            attributes: {
                dy: 5
            }
            },
            distance: 10
        },
        size: '95%'
        }]

        });

 </script>

那是我 视图.py

@login_required
def depend(request):
    return render(request,'dependWheel.html',{})

def jsonDepend(request):
     dataset = mail_item_countries_depend.objects.all().values_list('exped','destin','count')
     data = list(dataset)

     return JsonResponse(data, safe=False)

该图表不显示，我怎么能加载我的数据。

Answer 1

这就是答案。

 <script type="text/javascript">
        $(function(){
            $.getJSON('data',function(data){
                Highcharts.chart('container', {

                title: {
                    text: 'Highcharts Dependency Wheel'
                },

                accessibility: {
                    point: {
                    valueDescriptionFormat: '{index}. From {point.from} to {point.to}: {point.weight}.'
                    }
                },

                series: [{
                    keys: ['from', 'to', 'weight'],
                    data:data,
                    type: 'dependencywheel',
                    name: 'Dependency wheel series',
                    dataLabels: {
                    color: '#333',
                    textPath: {
                        enabled: true,
                        attributes: {
                        dy: 5
                        }
                    },
                    distance: 10
                    },
                    size: '95%'
                }]

                });
            });
        });
    </script>