Question

我正在从Django的Highcharts中绘制一个饼图。这里的想法是使用异步调用呈现图表，并从服务器返回JsonResponse。

但是，尽管我可以将值传递到饼图中，但是我仍然很难理解如何格式化数据以传递值和值名称

用于图表的数据来自SQL查询（Django ORM）。

def highchart_two(request):
    return render(request, 'logg_in_app/highchart2.html')

def highchart_chart_data(request):
    context_data = MaterialPlantVendor.objects \
    .filter(plant_code='A1') \
    .annotate(total=Count('material_name')) \
    .order_by('-spend_2015')

我可以使用以下代码创建图表：基本上将列表（ml）直接传递到图表数据中

ml=[]
for item in context_data:
    ispen=int(item.spend_2015)
    ml.append(ispen)

chart = {
        'chart': {'type': 'pie'},
        'title': {'text': pn},
        'tooltip': {
           'pointFormat': '<b>{point.name}</b>: <b>{point.percentage:.1f}%</b>'
                    },
        'series': [{
            'innerSize': '65%',
            'data': ml,
                }]
        }

return JsonResponse(chart)

但是，我不知道如何也传递值名称。根据示例，您应该能够以以下格式传递数据：

data: [
              ['Firefox',   45.0],
              ['IE',       26.8],
              ['Chrome',   12.8],
              ['Safari',    8.5],
              ['Opera',     6.2],
              ['Others',   0.7]

我尝试了zip列表，但是没有用... 我确信必须有直接的方法来实现这一目标。

谢谢您的帮助

Answer 1

您可以以这种格式传递数据，但是，您必须定义series.keys一个数组，该数组指定哪个选项映射到数据点数组中的哪个键：

series: [{
    type: 'pie',
    keys: ['name', 'y', 'sliced', 'selected'],
    data: [
        ['Firefox', 45.0],
        ['IE', 26.8],
        ['Chrome', 12.8, true, true],
        ['Safari', 8.5],
        ['Opera', 6.2],
        ['Others', 0.7]
    ]
}]

API参考：

https://api.highcharts.com/highcharts/series.pie.keys

演示：

https://jsfiddle.net/BlackLabel/us8qrjxy/

Answer 2

最后找到答案和传递数据的结构： def highchart_two（要求）：返回render（request，'logg_in_app / highchart2.html'）

def highchart_chart_data(request):
    context_data = MaterialPlantVendor.objects \
    .filter(plant_code='A1') \
    .annotate(total=Count('material_name')) \
    .order_by('-spend_2015')

ml=[]
for item in context_data:
    ispen=int(item.spend_2015)
    ml.append(ispen)


ValNa=[]
for item in context_data:
    strval = str(item.material_name)
    ValNa.append(strval)

这里是关键部分：

list_num_chars = [{'name':a, 'y':b} for a,b in zip(ValNa, ml)]


chart = {
        'chart': {'type': 'pie'},
        'title': {'text': pn},
        'tooltip': {
           'pointFormat': '<b>{point.name}</b>: <b>{point.percentage:.1f}%</b>'
                    },
        'series': [{
            'innerSize': '65%',
            'data': list_num_chars,
                }]
        }
return JsonResponse(chart)

PieChart（HighCharts）数据和标签

2 个答案: