无法在Highcharts中创建图表，并且id未定义
嗨我正在建立一个饼图，通过传递json数组到drawchart它显示图表的标签，但无法找到chart.i需要一个圆环图表，其中每个切片是可点击的，当我点击它需要的切片时，它带有一个id作为参数打开该特定切片的另一个图表 
$(document).ready(function () { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "bar.aspx/DistrictAnalysis", data: "{}", dataType: "json", success: function (Result) { Result = Result.d; var data = []; for (var i in Result) { //var jsondata = new Array(Result[i].City, Result[i].DevelopmentPercentage, Result[i].ID); var jsondata = { city: Result[i].City, DevelopmentPercentage: Result[i].DevelopmentPercentage, ID: Result[i].ID } data.push(jsondata); } DreawChart(data); console.log(data); }, error: function (Result) { alert("Error"); } }); function DreawChart(series) { $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Village Development Measuring System' }, tooltip: { formatter: function () { return '' + this.point.city + ': ' + this.point.DevelopmentPercentage + ' %'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '{point.city}: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' }, connectorColor: 'silver' } } }, series: [ { data: series, type: 'pie', dataType: 'json', animation: false, point: { events: { click: function (event) { //var id = this.ID; //alert(id); ////alert(event.point.ID); //alert(this.point.ID); //alert(this.x [![able to get id but chart cannot be created][2]][2]+ " " + this.y); } } } } ], }); } }); [![able to get id but chart cannot be created][1]][1]
让我们一次关注一个问题。 我认为您的数据有效已成功加载。 可以使用示例数据并在JSFiddle示例中显示您的问题 – http://jsfiddle.net/9e79t2sp/ （重新创建问题）
数据点需要具有y数值，因此您可以通过将DevelopmentPercentage设置为y的点来解决此问题 – 例如： http ： //jsfiddle.net/9e79t2sp/1/ （解决方案）
解决方案代码
$(function() { // paste your exemplary Result JSON data into Result variable var Result = {"d":[{"City":"NYC","DevelopmentPercentage":42,"ID":1234},{"City":"Berlin","DevelopmentPercentage":72,"ID":2345},{"City":"Tokyo","DevelopmentPercentage":92,"ID":5432}]}; //success: function (Result) { Result = Result.d; var data = []; for (var i in Result) { //var jsondata = new Array(Result[i].City, Result[i].DevelopmentPercentage, Result[i].ID); var jsondata = { city: Result[i].City, y: Result[i].DevelopmentPercentage, ID: Result[i].ID } data.push(jsondata); } DreawChart(data); console.log(data); //} //end of success function function DreawChart(series) { $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Village Development Measuring System' }, tooltip: { formatter: function() { return '' + this.point.city + ': ' + this.point.y + ' %'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '{point.city}: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' }, connectorColor: 'silver' } } }, series: [{ data: series, type: 'pie', dataType: 'json', animation: false, point: { events: { click: function(event) { //var id = this.ID; //alert(id); ////alert(event.point.ID); //alert(this.point.ID); //alert(this.x [![able to get id but chart cannot be created][2]][2]+ " " + this.y); } } } }], }); } });
在point.events.click回调中， this指的是点击的点，因此无需将其取消引用到this.point.ID
series: [{ // .... point: { events: { click: function (event) { // the ID field of the point var id = this.ID; // the whole series of the point var series = this.series; } } }