PieChart (HighCharts) 数据和标签答案

【问题标题】：PieChart (HighCharts) Data and LabelsPieChart (HighCharts) 数据和标签
【发布时间】：2019-02-13 19:27:26
【问题描述】：

我正在 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 列表，但没有奏效... 我确信必须有直接的方法来实现这一点。

感谢您的帮助

【问题讨论】：

标签： highcharts django-views

【解决方案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/

【讨论】：

【解决方案2】：

终于找到了答案和传递数据的结构： def highchart_two（请求）：返回渲染（请求，'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)

【讨论】：