PieChart（HighCharts）数据和标签

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)

但是，我无法弄清楚如何传递Value名称。根据示例，您应该能够以下列格式传递数据：

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

我已经尝试过拉链列表，但是没有用......我相信必须有直接的方法来实现这一点。

感谢您的任何帮助

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（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=[]
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)