データ表示&グラフプラグインHighcharts紹介+グラフ連動事例


      ,      Highcharts    ,        、  、  、    、           js     。
Highcharts概要
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;ivar y = 0;  //         
        for(var j=0;jfor(var i=0;ivar 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 = '

'

+ total_order +''+ '

Total
(order)

'
; 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); }
上の二つの例は詳しく説明しましたが、基本的にはAPIを見て、もう一回の例を見ると、すぐにこのプラグインを覚えることができます.これから必要な時は忘れたら、また振り返ってみてください.必要な仲間がいるのも手伝ってほしいです.
(●’ω’●)丿❤