doudang2817 2019-03-29 11:35
浏览 103

使用JSON将MySQL数据转换为Highcharts饼图

I am Trying to create a HighCahrts JS's PIE CHART using The Data I fetched From the MySQL Data, Which I fetched into The JSON Format .

Here is my php Code :

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

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

The JSON I am Getting is :

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

But THe problem is that Pie Chart is not being displayed on the Page. its just Blank.

I am USing the div with id="container"

And Here is my Script :

<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>
  • 写回答

1条回答 默认 最新

  • ds3422222222 2019-03-29 11:40
    关注

    You need to use the data format required by Highcharts:

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

    Live demo: http://jsfiddle.net/BlackLabel/ce72x3bu/

    API Reference: https://api.highcharts.com/highcharts/series.pie.data

    评论

报告相同问题?

悬赏问题

  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
  • ¥15 让node服务器有自动加载文件的功能
  • ¥15 jmeter脚本回放有的是对的有的是错的
  • ¥15 r语言蛋白组学相关问题