highchartsではajaxを利用してデータを転送し、使用します.

2087 ワード

1 highchartsの概要
	   IE6+、       、      、      HTML5       ;          ,72     100         。
	     [https://www.hcharts.cn/docs/start-introduction]

2.ajaxによるデータ描画
一般図
            json    ;
  :data={“name:”name_data,"y:"y_data,}
name_data=["  ",“  ”,“  ”]
y_data =[2,5,6]
        2 ,   5 ,   6 ;

  data,     highcharts   data   :
data_use = [{“  ”,2}{“  ”,5}{“  ”,6}]

その後chartを使用する.series[0].setData(data_use);
chartは図オブジェクトである.使用chart=window.document.getElementByID("")取得;
完了します.
ドリルダウン・プロパティの図面には、独自のコードを貼り付けます.
		var data = data  //ajax   data
                 var typenum = data.typenum;
                 var type = data.type;
                 var next = data.nextdata; //next             ;
                 for(var i=0;i0){
                          data1.push({"name": type[i], "y": typenum[i], "drilldown": type[i]});
                          data2.push({id: type[i], name: type[i], data: next[i]})
                     }
                 }
    :

chart1.options.drilldown.series = data2;
                 chart1.series[0].setData(data1);


これによりドリルダウン効果が現れます.
データを放出する場所:
plotOptions: {
				pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						depth: 35,
						dataLabels: {
								enabled: true,
								//format: '
{point.name} : {point.percentage:.1f}%
' formatter: function() { return this.y > 0 ? '' + this.point.name + ':' +Highcharts.numberFormat(this.percentage, 2)+ '%':null; } } } }, series: [{ type: 'pie', name: '****' }], drilldown: { }

私も菜鳥です.みんなで交流して進歩します.