无法在Highcharts中创建图表，ID未定义 [英] Unable to Create Chart in Highcharts and id is undefined

问题描述

Hi
i建立一个饼图，通过传递json数组到drawchart它显示图表的标签，但无法找到chart.i需要一个圆环图，每个切片是可点击的，它带有一个id参数，当我点击切片，需要打开该特定切片的另一个图表

 < script> $（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（series）; console.log（data）;}，error：function（Result）{alert（Error）;}} .highcharts（{chart：{plotBackgroundColor：null，plotBorderWidth：null，plotShadow：false，type：'pie'}，title：{text：'Village Development Measuring System'}，tooltip：{formatter：function < b>'+ this.point.city +'< / b> ;:'+ this.point.DevelopmentPercentage +'％'; }}，plotOptions：{pie：{allowPointSelect：true，cursor：'pointer'，dataLabels：{enabled：true，format：'< b> {point.city}< / b> ;: {point.percentage :. 1f}％'，style：{color：（Highcharts.theme&& amp; Highcharts.theme.contrastTextColor）|| 'event';}}}}，系列：[{data：series，type：'pie'，dataType：'json'，animation： {// var id = this.ID; // alert（id）; ////alert(event.point.ID）; //alert(this.point.ID）; //alert(this.x [！[能够得到id但不能创建图表] [2]] [2] ++ this.y）; }}}}]，}）; }}）; < / script> [！[无法创建图表但无法创建图表] [1]] [1]  

 < div id =containerstyle =min-width：310px; height：400px; margin：0 auto>< / div>  
 

解决方案

一个时间。我假设你的数据有效，加载成功。可以使用示例数据并在JSFiddle示例中显示您的问题 - http://jsfiddle.net/9e79t2sp/（问题重新创建）

一个数据点需要有y个数字值，所以你可以通过设置 DevelopmentPercentage 为 y 的点 - 例如： http：/ /jsfiddle.net/9e79t2sp/1/ （解决方案）

解决方案代码：

  $（function（）{
 //将您的示例结果JSON数据粘贴到结果变量
 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）; 
 //} //成功函数的结束
 
函数DreawChart（series）{
 $（'＃container'）。highcharts（{
 chart：{
 plotBackgroundColor：null，
 plotBorderWidth：null，
 plotShadow：false，
 type：'pie'
}，
 title：{
 text ：'Village Development Measuring System'
}，
 tooltip：{
 formatter：function（）{
 return'< b>'+ this.point.city +'< ; / b> ;:'+ this.point.y +'％'; 
} 
}，
 
 plotOptions：{
 pie：{
 allowPointSelect：true，
 cursor：'pointer'，
 dataLabels：{
 enabled：true，
 format：'< b> {point.city}< / b> ：{point.percentage：.1f}％'，
 style：{
 color：（Highcharts.theme&& amp; Highcharts.theme.contrastTextColor）||'black'
} 
 connectorColor：'silver'
} 
} 
}，
 
系列：[{
 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 [！[能够得到id但不能创建图表] [2]] [2] ++ this.y）; 
} 
} 
} 
}]，
}）; 
} 
}）; 
  

Hi i am building a pie chart by passing json array to drawchart it displaying labels of chart but unable to find the chart.i need a donut chart where each slice is clickable which carries a id as it parameter when i click the slice it need to open a another chart of that particular slice

  <script>
       $(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 '<b>' + this.point.city + '</b>: ' + this.point.DevelopmentPercentage + ' %';
                   }
               },
         
               plotOptions: {
                   pie: {
                       allowPointSelect: true,
                       cursor: 'pointer',
                       dataLabels: {
                           enabled: true,
                           format: '<b>{point.city}</b>: {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);
                              }
                          }
                      }
                  }
               ],
           });
       }
       });
   </script>
[![able to get id but chart cannot be created][1]][1]

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

解决方案

Let's focus on a single problem at a time. I assume that your data is valid are loaded successfully. It is possible to use exemplary data and show your problem in a JSFiddle example - http://jsfiddle.net/9e79t2sp/ (problem recreated)

A data point needs to have y numberic value, so you could fix this by setting DevelopmentPercentage as y of a point - example: http://jsfiddle.net/9e79t2sp/1/ (solution)

Solution code:

$(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 '<b>' + this.point.city + '</b>: ' + this.point.y + ' %';
        }
      },

      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.city}</b>: {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);
            }
          }
        }
      }],
    });
  }
});

这篇关于无法在Highcharts中创建图表，ID未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！