Highcharts将柱形图转换为饼图

Question

在阅读了很多关于饼图的帖子和教程后，我完全陷入了困境。我有一个可以正常工作的柱形图，但我需要将其转换/更改为饼图。

图表的数据来自数据表，通过查询并以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'
    }
    },

        });
    });

});

});

Answer 1

查看Basic pie了解详情。我在代码中做了一些更改，特别是在处理来自ajax响应的饼图数据时。检查评论，我还注释了饼图不需要的代码

＆＃13;

＆＃13;

$(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); 
         }); */
    var data = [{
      "name": "Month",
      "data": ["Jun"]
    }, {
      "name": "percent",
      "data": [55.68]
    }, {
      "data": [20.45]
    }, {
      "data": [7.95]
    }, {
      "data": [15.91]
    }]
    $.each(data, function(i, el) {
      if (el.name == "Month")
        categories = el.data;
        //below is some change check https://www.highcharts.com/demo/pie-basic
      else data4.push({
        name: el.name,
        y: el.data[0]
      });
    });
    //console.log(JSON.stringify(data4))

    $('#container').highcharts({
      chart: {
        renderTo: 'container',
        type: 'pie', //change to pie
        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: [{
        data: data4
      }],

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

    });
  });

  //});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

＆＃13;

＆＃13;

＆＃13;