Highcharts将柱状图转换为饼图

在阅读了许多关于饼图的帖子和教程之后，我完全被卡住了。我有一个可以正常工作的柱状图，但我需要将其转换/更改为饼图

图表的数据通过查询来自数据表，并以Json格式返回

[{"name":"Month","data":["Jun"]},{"name":"percent","data":[55.68]},{"data":[20.45]},{"data":[7.95]},{"data":[15.91]}]

我遇到的最大问题是使用json结果，就像使用柱状图一样

我当前的柱状图：

$(function () {
var categories=[];
var data4 =[];

var chart;
$(document).ready(function() {
    $.getJSON("../charts/1-2-4-overall_month_chart.php?From=<?php echo $StartDate;?>&To=<?php echo $EndDate;?>", function(json) { 
        $.each(json,function(i,el) { 
        if (el.name=="Month") 
        categories = el.data; 
        else data4.push(el); 
        }); 



    $('#container1').highcharts({
            chart: {
            renderTo: 'container',
            type: 'column',
            marginTop: 25,
    marginRight: 25,
            marginBottom: 25,
    plotBackgroundColor: '#FCFFC5'
            },
            title: {
                text: '',

            },
            subtitle: {
                text: '',
                x: -20
            },
             xAxis: {
     categories: categories,
             labels: {
             enabled: true
             }
     },

            yAxis: {
    endOnTick: false,
            max:101,
    showFirstLabel: false,
        lineColor:'#999',
        lineWidth:1,
        tickColor:'#666',
        tickWidth:1,
        tickLength:2,
    tickInterval: 10,
        gridLineColor:'#ddd',
                title: {
                    text: 'Percentage %',
        style: {
                fontFamily: 'Tahoma',
        color: '#000000',
                fontWeight: 'bold',
        fontSize: '10px'
                }
                },
             plotLines: [{
     color: '#808080'
             }],

    labels: {
            align: 'left',
            x: 0,
        y: -2
        }
            },

    legend: {
     enabled: false,
                itemStyle: {
                    font: '11px Trebuchet MS, Verdana, sans-serif',
                    color: '#000000'
                },
                itemHoverStyle: {
                color: '#000000'
            },

            itemHiddenStyle: {
             color: '#444'
            }

        },

    colors: [
    '#ff0000', 
    '#f49004',
    '#3abf05',
    '#8b8c8a', 
    ],

    plotOptions: {
    column: {
        colorByPoint: false
    },
    series: {
    pointPadding: 3.25,
    cursor: 'pointer',
    pointWidth:30,
    point: {
            events: {
            click: function() {
            window.location.href = "1-4-detractors_chart_month.php";
    }
            }
            },

    legendIndex:0,

            dataLabels: {
                enabled: true,
                //rotation: -90,
                color: '#000000',
                align: 'right',
                cursor: 'pointer',

                format: '{point.y:.2f}', // one decimal
                y: -20, // 10 pixels down from the top
                style: {
                    textShadow: false,
                    fontSize: '8px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
            }

        },

    tooltip: {
    enabled: false,
        },

    navigation: {
        buttonOptions: {
            verticalAlign: 'top',
            y: -10
        }
        },

    credits: {
        enabled: false
    },

            series: data4,

    lang: {
    noData: "No data for your date<br /> selection"
    },
    noData: {
    style: {
    fontWeight: 'bold',
    fontSize: '12px',
    color: '#303030'
    }
    },

        });
    });

});

});

查看更多信息。我在代码中做了一些更改，特别是在处理来自ajax响应的饼图数据时。检查注释，我还注释掉了饼图不需要的代码

$function{ var类别=[]； VarData4=[]； var图； $document.readyfunction{ /*$.getJSON../charts/1-2-4-totall_month_chart.php？From=&To=，functionjson{ $.eachjson，functioni，el{ 如果el.name==月份 类别=el数据； else-data4.pushel； }; */ 风险值数据=[{ 姓名：年月日， 数据：[6月] }, { 名称：百分比， 数据：[55.68] }, { 数据：[20.45] }, { 数据：[7.95] }, { 数据：[15.91] }] $.eachdata，functioni，el{ 如果el.name==月份 类别=el数据； //下面是一些零钱支票https://www.highcharts.com/demo/pie-basic else数据4.push{ 姓名：el.name， y:el.数据[0] }; }; //console.logJSON.stringifydata4 $'container'.highcharts{ 图表：{ renderTo:'容器'， 键入：“饼图”，//更改为饼图 玛金托普：25， marginRight:25， marginBottom:25， plotBackgroundColor:'FCFFC5' }, 标题：{ 正文：， }, 副标题:{ 正文：， x:-20 }, /*xAxis：{ 类别:类别,， 标签：{ 已启用：true } }, 亚克斯：{ 恩东蒂克：错， 最高：101， showFirstLabel:false， 线条颜色：“999”， 线宽：1， tickColor:'666'， 宽度：1， 长度：2， 时间间隔：10， gridLineColor:'ddd'， 标题：{ 文本：“百分比%”， 风格：{ fontFamily：“塔荷马”， 颜色：“000000”， fontWeight:'粗体'， 字体大小：“10px” } }, 绘图线：[{ 颜色：“8080” }], 标签：{ 对齐：“左”， x:0,， y:-2 } },*/ 图例：{ 启用：false， 项目样式：{ 字体：“11px投石机MS，Verdana，无衬线”， 颜色：“000000” }, 项目悬停样式：{ 颜色：“000000” }, itemHiddenStyle：{ 颜色：“444” } }, 颜色：[ “ff0000”， ‘f49004’， “3abf05”， “8b8c8a”， ], 打印选项：{ /*专栏：{ colorByPoint:错误 },*/ 系列：{ 点填充：3.25， 光标：“指针”， 点宽：30， 要点：{ 活动：{ 单击：函数{ window.location.href=1-4-detractors\u chart\u month.php； } } }, 传奇索引：0， 数据标签：{ 启用：对， //轮换：-90， 颜色：“000000”， 对齐：“右”， 光标：“指针”， 格式：'{point.y:.2f}'，//一位小数 y:-20，//从顶部向下10像素 风格：{ textShadow:false， fontSize:'8px'， fontFamily:“Verdana，无衬线” } } } }, 工具提示：{ 启用：false， }, 导航：{ 按钮选项：{ 垂直排列：“顶部”， y:-10 } }, 学分：{ 已启用：false }, 系列：[{ 数据：数据4 }], 朗：{ noData:没有日期选择的数据 }, 野田：{ 风格：{ fontWeight:'粗体'， fontSize:'12px'， 颜色：“303030” } }, }; }; //}; };

---

你真正关心的是什么？默认情况下，它应该是饼图聊天，或者应该动态转换为饼图，即从列转换为饼图，反之亦然-versa@Deep3015你好，谢谢你的回复。默认情况下，我只需要将图表t绘制成饼图，我不想在图表类型之间进行更改。您的a为星形。在阅读了您的代码之后，我现在了解了如何创建饼图。非常感谢你花这么多时间。