Unable to plot two piechart using Highchart

问题

I want to plot two piechart side by side using dynamic data by making two ajax call(since both chart is based on different dataset) but always i am getting only one chart drawn and not the second one don't know where i am making mistake. my code goes like below. Kindly help me to draw the two charts next to each other.

 function visitorData(data, type) {
    var chartData = JSON.parse(data.d);
    var data1 = ""; var chartAlign = "";
    if (type == 0) {
        data1 =
                   [{ name: chartData.Table[0].RegName, y: chartData.Table[0].IC, id: 8 },
                   { name: chartData.Table[1].RegName, y: chartData.Table[1].IC, id: 4 },
                   { name: chartData.Table[2].RegName, y: chartData.Table[2].IC, id: 7 },
                   { name: chartData.Table[3].RegName, y: chartData.Table[3].IC, id: 6 }];
        chartAlign = '15%';
    }
    else if (type == 1) {
        data1 =
                        [{ name: chartData.Table[0].InvStyleName, y: chartData.Table[0].LatestPercent },
                       { name: chartData.Table[1].InvStyleName, y: chartData.Table[1].LatestPercent },
                       { name: chartData.Table[2].InvStyleName, y: chartData.Table[2].LatestPercent },
                       { name: chartData.Table[3].InvStyleName, y: chartData.Table[3].LatestPercent },
                       { name: chartData.Table[4].InvStyleName, y: chartData.Table[4].LatestPercent }];
        chartAlign = '75%';
    }
    var chart = Highcharts.chart('container', {
        chart: {
            renderTo: 'container',
            // plotBackgroundColor: null,
            type: 'pie',
            plotBorderWidth: 1,
            plotShadow: false,
            plotLeft: 100,           
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
        },
        plotOptions: {
            pie: {
                allowPointSelect: false,
                cursor: 'pointer',
                innerSize: 50,
                depth: 45,
                shadow: false,
                states: {
                    hover: {
                        enabled: false
                    },
                },
                dataLabels: {
                    color: 'grey',
                    distance: 10,
                    connectorWidth: 0,
                    connectorPadding: 0
                }
            },
        },
        exporting: {
            buttons: {
                contextButtons: {
                    enabled: false,
                    menuItems: null
                }
            },
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: []
       });
    chart.addSeries({
        "data": data1,
        size: 100,
        top: 20,
        center: [chartAlign]
    });
}
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetGeo",
        data: '{name: "' + "manish" + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {

            visitorData(data, 0);
        }
    });
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetInvStyles",
        data: '{name: "' + "manish" + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            visitorData(data, 1);
        }
    });
});

回答1:

You are creating highchart only on one container.For two pie chart to display you have give two continer container1 and container2 and initialize like

var chart1 = Highcharts.chart('container1', {...}) and
var chart2 = Highcharts.chart('container2', {...})

Fiddle link

来源：https://stackoverflow.com/questions/41929450/unable-to-plot-two-piechart-using-highchart