[꼭대기] 데이터 구현 & 도표 플러그 인 Highcarts 소개 + 도표 연동 사례

      ，      Highcharts    ，        、  、  、    、           js     。

Highcharts 소개
아래 의 소 개 는 Highcarts 중국어 망 Highcarts 에서 나 온 순수한 javascript 로 작 성 된 도표 라 이브 러 리 입 니 다. 웹 사이트 나 웹 응용 프로그램 에 상호작용 적 인 도 표를 간편 하 게 추가 할 수 있 습 니 다. Highcarts 는 현재 직선 도, 곡선 도, 면적 도, 기둥 모양 도, 떡 도, 산 점도 등 18 가지 서로 다른 유형의 도 표를 지원 하여 웹 도표 에 대한 모든 수 요 를 만족 시 킬 수 있 습 니 다!Highcarts 장점: 호환성 이 좋 고 오픈 소스, 순수 js, 도표 가 풍부 하고 동적 이 며 다 축 으로 내 보 내 고 인쇄 할 수 있 으 며 외부 데 이 터 를 확대 하고 불 러 오 는 것 을 지원 합 니 다.또한, Highcarts 의 실행 은 두 개의 JS 파일 이 필요 합 니 다. Highcarts. js 와 jQuery, MooTools, Prototype, Highcarts Standalone Framework 는 JS 프레임 워 크 중 하 나 를 자주 사용 합 니 다.
현재 Highcharts 에 도 중국어 사이트, 사이트 주소 가 있 습 니 다.http://www.hcharts.cn/ 여러분 의 학습 과 사용 을 편리 하 게 하지만 이 사이트 의 API 부분의 한 화 는 아직도 완선 되 고 있 으 며 여기 서 학습 하고 다운로드 할 수 있 습 니 다.사심 없 는 헌신 에 감 사 드 립 니 다.
Highcharts API
중국어 사이트 의 한 화 는 아직 완전 하지 않 지만 API 를 보면 Highcarts 중국어 망 에 가 는 것 을 추천 합 니 다. 상세 한 설명 과 인 스 턴 스 API 주소 가 있 습 니 다.http://www.hcharts.cn/api/index.php 참고 로 그의 검색 기능 은 확실히 매우 좋다.
프로젝트 인 스 턴 스
Highcarts 에는 여러 가지 도표 가 있 는데 사용 중의 각 도표 간 의 차이 가 크 지 않 습 니 다. 여기 서 저 는 대표 적 인 도 표를 따로 꺼 내 서 사례 로 하고 상세 한 주석 을 할 것 입 니 다. 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);
}

위의 두 가지 예 를 들 어 저 는 상세 한 설명 을 했 습 니 다. 기본적으로 API 를 한 번 보고 다시 한 번 예 를 들 면 이 플러그 인 을 빨리 배 울 수 있 습 니 다.앞으로 필요 할 때 잊 어 버 리 고 돌아 보면 필요 한 친구 들 에 게 도 도움 이 되 었 으 면 좋 겠 습 니 다.
(●’ω’●) 丿❤