时间戳

首页 > 解决方案 > 填充数据

javascript - 填充数据

问题描述

饼图加载后显示一个空图表。我提到 了 https://api.highcharts.com/highcharts/series.pie.data

并在html 

<script>
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'counts',
            colorByPoint: true,
            data: [
                    {% for item in dataset %}
                            { name: {{ item.category }}, y: {{ item.issues }} },
                    {% endfor %}
                  ]
        }]
    });

    </script>

请让我知道为了填充图表我应该改变什么。提前致谢。

标签： javascript

解决方案

如果您还没有这样做，我认为您可以在模型上进行选择。我正在考虑这样的事情，因为我不知道“问题”字段是您的“类别”或字段本身的价值。

HIGH = 'H'
MEDIUM = 'M'
LOW = 'L'
MY_CHOICES = (
    (HIGH, 'High_value'),
    (MEDIUM, 'Medium_value'),
    (LOW, 'Low_value'),
)

然后将其传递给对象类别的字段选择。ex: category = models.CharField(max_length=8, choices=MY_CHOICES).如果它们是两个独立的字段，则对问题执行相同的操作。您的视图需要一些工作，因此我建议您使用字典或元组来存储数据。然后，您可以将视图函数嵌入到模板中，并执行 ajax 调用来指示后端您期望得到一个 JSON 对象作为回报。前任：

<div id="container" data-url="{% url 'catagory_data' %}"></div>

及以下

 $.ajax({
    url: $("#container").attr("data-url"),
    dataType: "json",
    success: function (data) {
      Highcharts.chart("container", data);
    },
  });

你的观点可以这样写——

假设您有一个模型类别

def catagory_data(request):
dataset = Catagory.objects \
    .values('catagory') \
    .exclude(catagory='') \
    .annotate(total=Count('catagory')) \
    .order_by('catagory')
display_name = dict()
for cata_tuple in Catagory.MY_CHOICES:
    display_name[cata_tuple[0]] = cata_tuple[1]

chart = {
    'chart': {'type': 'pie'},
    'title': {'text': 'Appscan Vulnerabilities\, 2020'},
    'series': [{
        'name': 'catagory counts',
        'data': list(map(lambda row: {'name': display_name[row['catagory']], 'y': row['issues']}, dataset))
    }]
}


return JsonResponse(chart)

你可以在另一个函数中渲染你的模板

return render(request, 'appscan.html')

我认为你可以对问题做同样的事情，或者你可以根据你的设计在同一个视图中编写它。

推荐阅读