highchartsではajaxを利用してデータを転送し、使用します.
2087 ワード
1 highchartsの概要
2.ajaxによるデータ描画
一般図
その後chartを使用する.series[0].setData(data_use);
chartは図オブジェクトである.使用chart=window.document.getElementByID("")取得;
完了します.
ドリルダウン・プロパティの図面には、独自のコードを貼り付けます.
これによりドリルダウン効果が現れます.
データを放出する場所:
私も菜鳥です.みんなで交流して進歩します.
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: {
}
私も菜鳥です.みんなで交流して進歩します.