HighChartsを使用してバックグラウンドデータを動的に取得してグラフを生成

最近の小さなプロジェクトでは、いくつかのデータを統計する必要があるので、グラフのスタイルをより直感的に表示したいと思っています.ページでの柔軟な展示が必要であることを考慮して、jfreechartの使用を断念し、以前からHighChartsというグラフを生成するツールを聞いたことがあるので、公式サイトでこのツールをダウンロードし、このjsツールの働き方を簡単に理解しました.
HighChartsは純粋なjavascriptで作成されたアイコンライブラリで、WebサイトやWebアプリケーションにインタラクティブなグラフを簡単に追加できます.HighChartsがサポートするグラフのタイプは、曲線図、領域図、柱状図、円盤状図、散点図、総合グラフです.私が主に使っているのは餅図(pie)です.
HighChartsを使っていたとき、私は最初に構成が正しいかどうかをテストするために、公式ドキュメントのdemoを直接コピーして実行しました.自信満々でしたが、最初からトラに遭遇したとは思いませんでした.公式提供のdemoを直接実行するのは失敗しました.本当に理解できない!公式demoのコードは次のとおりです.

 $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares January, 2015 to May, 2015'
        },
        tooltip: {
            pointFormat: '{series.name}: {point.percentage:.1f}%'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: "Brands",
            colorByPoint: true,
            data: [{
                name: "Microsoft Internet Explorer",
                y: 56.33
            }, {
                name: "Chrome",
                y: 24.03,
                sliced: true,
                selected: true
            }, {
                name: "Firefox",
                y: 10.38
            }, {
                name: "Safari",
                y: 4.77
            }, {
                name: "Opera",
                y: 0.91
            }, {
                name: "Proprietary or Undetectable",
                y: 0.2
            }]
        }]
    });
});

ここでcontainerは、この円グラフを配置するdivのidである.しかし、このプログラムは私のプログラムではずっと表示できませんでした.stackoverflowで解決策を探していたとき、この宣言を別の方法に変えたことを知りました.コードは以下の通りです.

var chart = new Highcharts.Chart({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie',
                        renderTo: 'blogChart'
                    },
                    title: {
                        text: '           '
                    },
                    credits: { 
                        text: 'www.yechoor.cn' 
                    }, 
                    tooltip: {
                        pointFormat: '{series.name}: {point.percentage:.1f}%'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}: {point.percentage:.1f} %',
                            },
                    	showInLegend: true
                        },
                    },
                    series: [{
                        name: "blog percent",
                        colorByPoint: true,
                        data:jsondata
                     }]
                });

は最初の問題を順調に解決した.
公式demoは静的データを与えているが,我々が示したデータはバックグラウンドプログラム解析の結果に違いないので,バックグラウンドからフロントにデータを動的に伝達する必要があり,ここではjson伝達を用いることを選んだ.私はjsonを使っています.orgが提供するjsonツール.バックグラウンド転送コード:

JSONObject object = new JSONObject(data);
		try {
			response.setContentType("application/json; charset=UTF-8");
			response.getWriter().print(object);
			System.out.println("key= "+object);
		} catch (Exception e) {
		}

私のプログラムではdataはMapタイプのデータなので、JSONObjectオブジェクトを使用して包装し、json形式に変換したデータは次のようになります.

{"  ":1,"  ":1,"ckeditor":3,"  ":1,"  ":1,"  ":1,"  ":1,"xheditor":2,"java":1,"  ":1,"css":1}

このjson形式のデータは,フロントで円グラフを生成するデータソースとして必要である.私の処理方法は次のとおりです.

success:function(result){
            	 var json = result;              
                 var jsondata = [];              
                 for (var i in json) {
                     jsondata.push([i, json[i]]);
                 } 
//                
}

次に、この変換後のjsondataを、円グラフのデータソースseriesに埋め込みます.コードは次のとおりです.

 series: [{
                        name: "blog percent",
                        colorByPoint: true,
                        data:jsondata
                     }]

以上は,HighChartsを用いてバックグラウンドデータを動的に取得して円グラフを生成するdemoである.