无法使用Highchart绘制两个饼图 [英] Unable to plot two piechart using Highchart

问题描述

我想通过制作两个ajax调用（因为两个图表都基于不同的数据集）并排绘制两个饼图并使用动态数据，但总是我只绘制一个图表，而不是第二个不知道我在哪里我犯了错误。我的代码如下所示。请帮助我画出两个图表相邻。

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

推荐答案

您只在一个容器上创建高分布图。饼图来显示你有两个continer container1 和 container2 并初始化如

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', {...})

小提琴链接

这篇关于无法使用Highchart绘制两个饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！