Данные MySQL в круговую диаграмму Highchart с использованием JSON

Question

Я пытаюсь создать PIE-диаграмму HighCahrts JS, используя данные, которые я выбрал из данных MySQL, которые я получил в формате JSON.

Вот мой php-код:

foreach($row as $rec)  
{  
$json_array['label']=$rec['user_type_detail'];  
$json_array['value']=$rec['id']; 

array_push($json_data,$json_array);  
}  
?> 

JSON, который я получаю:

[{"label":"Government Doctor","value":"8"},
 {"label":"Private Doctor","value":"5"},
 {"label":"Public Doctor","value":"6"},
 {"label":"Student","value":"4"}
] 

Но проблема в том, что круговая диаграмма не отображается на странице.это просто пусто.

Я использую div с id = "container"

А вот мой сценарий:

<script type="text/javascript">

Highcharts.chart('container', {
chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
},
title: {
    text: 'Browser market shares in January, 2018'
},
credits: {
  enabled: false
},
exporting: { enabled: false } ,
tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
                color: (Highcharts.theme && 
Highcharts.theme.contrastTextColor) || 'black'
            }
        }
    }
},
series: [{
    name: 'Brands',
    colorByPoint: true,
    data:<?php echo json_encode($json_data) ?>
}]
});
</script>

Answer 1

Вам необходимо использовать формат данных, требуемый Highcharts:

    data: [{
            "name": "Government Doctor",
            "y": 8
        },
        {
            "name": "Private Doctor",
            "y": 5
        },
        {
            "name": "Public Doctor",
            "y": 6
        },
        {
            "name": "Student",
            "y": 4
        }
    ]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/ce72x3bu/

Справочник по API: https://api.highcharts.com/highcharts/series.pie.data