我想通过进行两次 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);
}
});
});
您只在一个容器上创建 highchart。对于要显示的两个饼图,您已经给出了两个连续的container1
并container2
并初始化,例如
var chart1 = Highcharts.chart('container1', {...}) and
var chart2 = Highcharts.chart('container2', {...})
小提琴链接