[トップ]データ表示&グラフプラグインHighcharts紹介+グラフ連動事例
10069 ワード
， Highcharts ， 、 、 、 、 js 。
Highchartsからの紹介Highchartsは純粋なjavascriptで作成されたグラフライブラリです.簡単で便利です.WebサイトやWebアプリケーションにインタラクティブなグラフを追加できます.Highchartsは現在、直線図、曲線図、面積図、棒グラフ、円グラフ、散点図など18種類以上の種類のグラフをサポートしています.Highcharts優勢:互換性がよく、オープンソース、純js、図表が豊富で、ダイナミック、多軸、出力と印刷ができます.外部データのスケーリングとロードをサポートします.また、Highchartsの運行には2つのJSファイルが必要です.high charts.jsとjQuery、MooTools、Prottotype、Highcharts Standarlone Frame ewarkはJSフレームの一つを常用しています.
現在Highchartsにも中国語サイトがあります.http://www.hcharts.cn/皆さんの学習に便利ですが、このサイトのAPI部分の漢化はまだ完備されています.ここで勉強したり、ダウンロードしたりできます.ここで彼らの献身に感謝します.
Highcharts API
中国語サイトの中国語化はまだ完全ではありませんが、APIを見るならHighcharts中国語ネットに行くことを勧めます.詳しい説明と実例API住所があります.http://www.hcharts.cn/api/index.php ちなみに彼の検索機能はとても使いやすいです.
プロジェクトの例
Highchartsには多くのグラフがあります.使用中の各グラフの違いは大きくないです.ここでは代表的なグラフを単独で出して例としてみます.そして、詳細な注釈をします.APIに協力して読みます.早く入門できるはずです.同時に、私が二つの円グラフの間に設定した連動は左のサプライヤーの分布をデフォルトで示しています.円グラフの一部をクリックすると、そのサプライヤーの下にある工場の分布図を右にロードします.
例:
//Supplier1_factory begin // ，
var SupChartMain = new Highcharts.Chart({
chart:{
renderTo:"sup1", // id div
type:"pie", //
height:298,
width:520,
margin:0,
plotBackgroundColor:null,//
plotBorderWidth:null,//
plotShadow:false,//
},
colors:['#e74c3c','#c0392b','#D35400','#E67E22','#bdc3c7','#95a5a6','#7f8c8d','#34495E','#2C3E50','#ecf0f1'],//
title:{//
text:'Please choose a supplier...'
},
credits:{// highcharts
enabled:false
},
tooltip:{// hover tip Order： ，
pointFormat: 'Order:{point.x}',
},
legend: { //
align:'left', //
layout: 'vertical', //
verticalAlign:'top', //
y:40,//
x:-20,
itemStyle:{//
fontWeight:'400',
color:'#666'
}
},
plotOptions:{
pie:{
allowPointSelect:true, //
animation:true, //
states:{
hover:{
brightness:0,
}
},
dataLabels:{ //
enabled:true, //
distance:-15, //
formatter:function(){ // y%
return this.y + '%';
},
style:{ //
fontWeight:"400",
color:"#fff",
fontSize:'11px'
}
},
events: { //
click: function(e) {
var sup_id = this.data[e.point.index].sup_id;//
draw_factory_coverage(SupplyChart.mydata,sup_id);// ， ， SupplyChart.mydata ，sup_id id
}
},
cursor: 'pointer', //
showInLegend: true, //
startAngle:0, //
endAngle:360, //
center:['50%', '50%'], //
}
},
series:[{
type:'pie',//
innerSize:'85%',// ，
data:[1]
}]
});
// ，
function draw_supplier_coverage(jdata_sups){
on_chart_load_complete(chart_factory_coverage_name);
if( jdata_sups.result != "success"){
alert("load inspector workload data failed");
return;
}
var sups= []; //
var orders = []; //
var total_order = 0; //
for(var i=0;i<jdata_sups.sups.length;i++){
var y = 0; //
for(var j=0;j<jdata_sups.sups[i].factorys.length;j++){
y+= jdata_sups.sups[i].factorys[j].orders;
}
orders[i] = y;
total_order+=y;
}
for(var i=0;i<jdata_sups.sups.length;i++){
var percent =Math.round( orders[i]*100/total_order );
sups[i] = {'name':jdata_sups.sups[i].sup_name,'x':orders[i],'y':percent,'sup_id':jdata_sups.sups[i].sup_id};
}
// ， ， series ， series[0]， 。
SupplyChart.series[0].setData(sups);
//
var pie_text = '<p style="color:#7f8c8d;font-size:62px;">' + total_order +'</p>'+
'<br/><p style="color:#999;font-size:20px;font-weight:normal;">Total<br/><span style="font-size:12px;color:#999;">(order)</pan></p>';
var pie_title = {'text':pie_text,align:"center",verticalAlign:"middle",y:10,};
SupplyChart.setTitle( pie_title);
// supplier 。 jdata_sups ， ，
SupplyChart.mydata=jdata_sups.sups;
// ， 。
draw_factory_coverage(SupplyChart.mydata,SupplyChart.mydata[0].sup_id);
}
(●’ω’●)丿❤