使用highchart使用

var chart; 
 
     point = null; 
 
     $(document).ready(function() { 
 
      $.ajax({ 
 
       type: "POST", 
 
       contentType: "application/json; charset=utf-8", 
 
       url: "Srikakulam_mandal.aspx/MandalAnalysis", 
 
       dataType: "json", 
 
       success: function (Result) { 
 
        Result = Result.d; 
 
        Resultarr = []; 
 
        for (var i in Result) { 
 
         var data = { 
 
          LocationName: Result[i].LocationName, 
 
          Ranking: Result[i].Ranking, 
 
          LocationId: Result[i].LocationId 
 
         }; 
 
         Resultarr.push(data); 
 
        } 
 
         chart = new Highcharts.Chart({ 
 
          chart: { 
 
           plotBackgroundColor: null, 
 
           plotBorderWidth: null, 
 
           plotShadow: false, 
 
           type: 'pie' 
 
          }, 
 
          title: { 
 
           text: 'Village Development Measuring System' 
 
          }, 
 
          tooltip: { 
 
           formatter: function() { 
 

 
            return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %'; 
 
            // return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %' 
 
           } 
 
          }, 
 

 
          plotOptions: { 
 
           pie: { 
 
            allowPointSelect: true, 
 
            cursor: 'pointer', 
 
            dataLabels: { 
 
             enabled: true, 
 
             // format: '<b>{point.LocationName}</b>: {point.Ranking:.1f} %', 
 
             format: '<b>{point.LocationName}</b>: {point.Ranking:.1f} %', 
 
             style: { 
 
              color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
 
             }, 
 
             connectorColor: 'silver', 
 
            } 
 
           } 
 
          }, 
 

 
          series: [{ 
 
           "data": Resultarr, 
 
           type: 'pie', 
 
           point: { 
 
            events: { 
 
             click: function (event) { 
 
              alert(this.LocationId); 
 
             } 
 
            } 
 
           } 
 
          }], 
 
          "chart": { 
 
           "renderTo": "container" 
 
          }, 
 
         }); 
 
        } 
 
      }); 
 
     });

你好我试图用highchart插件，所以我传递一个JSON对象数据。所以我想创建一个圆环图jQuery的JSON对象创建一个圆环图解决我不能够applend图表，我想我的图表可以点击每个切片，并在代码生成slice.look的ID，请说明在何处我做错了

var chart; 
 
point = null; 
 
$(document).ready(function() { 
 
    $.ajax({ 
 
    type: "POST", 
 
    contentType: "application/json; charset=utf-8", 
 
    url: "Srikakulam_mandal.aspx/MandalAnalysis", 
 
    dataType: "json", 
 
    success: function(Result) { 
 
     Result = Result.d; 
 

 
     for (var i in Result) { 
 
     var data = [{ 
 
      LocationName: Result[i].LocationName, 
 
      Ranking: Result[i].Ranking, 
 
      LocationId: Result[i].LocationId 
 
     }]; 
 

 
     chart = new Highcharts.Chart({ 
 
      chart: { 
 
      plotBackgroundColor: null, 
 
      plotBorderWidth: null, 
 
      plotShadow: false, 
 
      type: 'pie' 
 
      }, 
 
      title: { 
 
      text: 'Village Development Measuring System' 
 
      }, 
 
      tooltip: { 
 
      formatter: function() { 
 

 
       return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %'; 
 
       // return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %' 
 
      } 
 
      }, 
 

 
      plotOptions: { 
 
      pie: { 
 
       allowPointSelect: true, 
 
       cursor: 'pointer', 
 
       dataLabels: { 
 
       enabled: true, 
 
       // format: '<b>{point.LocationName}</b>: {point.Ranking:.1f} %', 
 
       format: '<b>{point.LocationName}</b>: {point.Ranking:.1f} %', 
 
       style: { 
 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
 
       }, 
 
       connectorColor: 'silver', 
 
       } 
 
      } 
 
      }, 
 

 
      series: [{ 
 
      "data": data, 
 
      type: 'pie', 
 
      point: { 
 
       events: { 
 
       click: function(event) { 
 
        alert(this.LocationId); 
 
       } 
 
       } 
 
      } 
 
      }], 
 
      "chart": { 
 
      "renderTo": "container" 
 
      }, 
 
     }); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="container">

来源

2016-02-18 Lier

1 VAR数据Y的解决这个问题 - 把它放在一边for循环，就像var data = []。 2.在for循环中创建对象数组，如data.push（{....}）; 3.将此数据传递给高图 –

嗨satyaki即使我做过之前发现相同的问题请参阅此链接http://stackoverflow.com/questions/35448396/unable-to-create-chart-in-highcharts-and-id- is-undefined – Lier

嗨Krishnan''still无法appen真正我能够看到一个位置它意味着一些事情在appen的循环 – Lier

数据点的回答需要有Ÿ数字小值，那么你可以通过设置DevelopmentPercentage作为point.Good运气

$(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); 
 
      } 
 
      } 
 
     } 
 
     }], 
 
    }); 
 
    } 
 
});

来源

2016-02-19 03:21:24 Lier

$(function() { 
     $(document).ready(function() {      

        Resultarr = []; 
        for (var i=0 ;i<10; i++) { 
         var data = { 
          LocationName: "A"+i, 
          Ranking: i*2, 
          LocationId: i*3, 
          y:i*2 
         }; 
         Resultarr.push(data); 
        } 

        // var strJson =JSON.stringify(Resultarr) ; 
        // console.log( JSON.stringify(Resultarr)); 
         chart = new Highcharts.Chart({ 
          chart: { 
           plotBackgroundColor: null, 
           plotBorderWidth: null, 
           plotShadow: false, 
           type: 'pie' 
          }, 
          title: { 
           text: 'Village Development Measuring System' 
          }, 
          tooltip: { 
           formatter: function() { 

            return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %'; 
            // return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %' 
           } 
          }, 

          plotOptions: { 
           pie: { 
            allowPointSelect: true, 
            cursor: 'pointer', 
            dataLabels: { 
             enabled: true, 
             // format: '<b>{point.LocationName}</b>: {point.Ranking:.1f} %', 
             format: '<b>{point.LocationName}</b>: {point.Ranking:.1f} %', 
             style: { 
              color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
             }, 
             connectorColor: 'silver', 
            } 
           } 
          }, 

          series: [{ 
           "data": Resultarr, 
           innerSize: '50%', 
           type: 'pie', 
           point: { 
            events: { 
             click: function (event) { 
              alert(this.LocationId); 
             } 
            } 
           } 
          }], 
          "chart": { 
           "renderTo": "container" 
          }, 
         }); 
     }); 


});

请参阅本小提琴http://jsfiddle.net/52mL3arg/3/。有想法从这个so线程。通过托尔斯泰Hønsi

来源

2016-02-18 12:01:37

使用highchart使用

回答

相关问题