jquery - Jquery-1.6.3バージョンのみを許可して動的データ変更を使用して円グラフを作成する方法

Question

jqueryを使用して円グラフを作成する方法。ただし、サードパーティのプラグインを使用しない場合は、円グラフのデータを動的に更新する必要があります。チュートリアルのリンクまたは手順を共有すると便利です。

Answer 1

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<input type="button" id="btnPieChart" value="Pie Chart" />


 $(document).ready(function () {    

            RenderPieChart('container', [
                      ['Firefox', 45.0],
                      ['IE', 26.8],
                      ['Chrome',  12.8],                         
                      ['Safari', 8.5],
                      ['Opera', 6.2],
                      ['Others', 0.7]
                  ]);     

     $('#btnPieChart').live('click', function(){
         var data = [
                      ['Firefox', 42.0],
                      ['IE', 26.8],
                      {
                          name: 'Chrome',
                          y: 14.8,
                          sliced: true,
                          selected: true
                      },
                      ['Safari', 6.5],
                      ['Opera', 8.2],
                      ['Others', 0.7]
                  ];

            RenderPieChart('container', data);
     });

            function RenderPieChart(elementId, dataList) {
                new Highcharts.Chart({
                    chart: {
                        renderTo: elementId,
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    }, title: {
                        text: 'Browser market shares at a specific website, 2010'
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function () {
                                    return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: dataList
                    }]
                });
            };
        });