Question

我想通过进行两次ajax调用（因为两个图表都基于不同的数据集）使用动态数据并排绘制两个饼图但是我总是得到一张图表而不是第二张图表不知道我在哪里弄错了。我的代码如下所示。请帮我画两张图表。

 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);
        }
    });
});

Answer 1

您只在一个容器上创建高亮图。要显示两个饼图，您已经提供了两个汇编container1和container2并初始化为

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

Fiddle link

无法使用Highchart绘制两个饼图

1 个答案: