Highcharts常用图形报表展示

Highcharts中文网：http://www.hcharts.cn/demo/index.php

详细教程：http://www.runoob.com/highcharts/highcharts-tutorial.html

1、饼图

//饼图
var bing_chart = {
	chart: {
		    renderTo:'',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '百分比',
            data: [ 
                   ['Opera',  66.2],
                   ['Others',  33.8]
               ],
            tooltip: {
                valueSuffix: ''
            }
        }]
	
};

后台返回数据封装：

function drawBing(bingData) {
    var buffer = new StringBuffer();
    buffer.append("[");
    buffer.append("['IVF成单数:"+bingData[0].IVFNum+"'," + bingData[0].IVFNum + "],");
    buffer.append("['海外看病成单数:"+bingData[0].overseasNnm+"'," + bingData[0].overseasNnm+ "],");
    buffer.append("['体检成单数:"+bingData[0].medicalNum+"'," + bingData[0].medicalNum + "],");
    buffer.append("['丙肝成单数:"+bingData[0].HepatitisNum +"'," + bingData[0].HepatitisNum + "],");
    buffer.append("['其他成单数:"+bingData[0].otherNum+"'," + bingData[0].otherNum + "],");
    buffer.append("]");
    bing_chart.chart.renderTo = "statis_bing";
    bing_chart.title.text = "业务数据占比情况";
    bing_chart.series[0].type = "pie";
    bing_chart.series[0].name = "占比";
    bing_chart.series[0].data = eval(buffer.toString());
    var gg = new Highcharts.Chart(bing_chart);
}

JSP页面封装：
<div class="easyui-accordion" style="width:100%;height:auto; ">
    <div id="statis_bing" style="width:auto; min-height:400px;"></div>
 </div>

2、曲线图

//曲线图

  //封装显示数据
 function LineChartData(name, data, suffix){
        this.name = name;
        this.data = data;
        this.tooltip = new Tooltip(suffix);
 }

 var line_chart= {
		chart: {         
			renderTo:'',   
        },    
        title: {
            text: ''
        },
        subtitle: {
            text: '',
            x: 0
        },
        xAxis: {
            categories: ['Jan', 'Feb']  ,
            labels: {
                rotation: 0,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            labels: {
                format: '{value}'
            },
            title: {
                text: ''
            },
            plotLines: [{ 
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '',
           	shared: true
        },  
        series: [{
            name: '设备',
            data: [7.0, 6.9],
	        dataLabels: {
	            enabled: true,  
	            x: 4,
	            y: 10,
	            style: {
	                fontSize: '13px', 
	                textShadow: '0 0 3px black'
	            }
	        },
            tooltip: {
                valueSuffix: ''
            }
        }]
}; 


js异步请求后台

$.post("StatisAction_baiduStatis.jd", {data : JSON.stringify(page_options)}, function(data,status){  
        var result = jQuery.parseJSON(data);    
        var statis_chart = jQuery.parseJSON(result.statis_chart);   
        drawChart(statis_chart.items);  
    });  


封装曲线图表数据

var categories = new Array();  
var one_date = true;
var impression = new Array();
var click = new Array();
var cost = new Array();
var cpc = new Array();

function drawChart(chartData){
    categories = new Array();
    impression = new Array();
     click = new Array();
     cost = new Array();
     cpc = new Array();
    $.each(chartData,function(index, value) {  
         categories.push(<span style="color:#FF0000;">formatShowTime</span>(value.start_time));
         impression.push(value.impression); 
         click.push(value.click); 
         cost.push(value.cost); 
         cpc.push(value.cpc); 
    });
  
    line_chart.xAxis.categories = categories;
    line_chart.chart.renderTo = "statis_chart"; 
    reDrawChartLine();
}
function reDrawChartLine(){
    var dataList = new Array();   
        dataList.push(new LineChartData("展现数", impression));
        dataList.push(new LineChartData("点击数", click));
        dataList.push(new LineChartData("消费数", cost));
        dataList.push(new LineChartData("平均点击价格", cpc));
    var line_type = "line"; 
    if($("#pool").switchbutton("options").checked){
        line_type = "column"; 
        fu_title = "(累计数据)";
    } 

    line_chart.title.text = chart_title + fu_title;
    line_chart.chart.type= line_type;
    line_chart.series = dataList;
    <span style="color:#009900;">new Highcharts.Chart(line_chart)</span>;      
}

3、漏斗图

//漏斗图
var funnel_chart ={
    chart: {
        type: 'funnel',
        marginRight: 100
    },
    title: {
        text: '',
        x: -50
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b> ({point.y:,.0f})',
                color: 'black',
                softConnetctor: true
            },
            neckWidth: '30%',
            neckHeight: '25%'
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Unique users',
        data: [
            ['Website visits',   15654.8],
            ['Downloads',       4064],
            ['Requested price list', 1987],
            ['Invoice sent',    976],
            ['Finalized',    846]
        ]
    }]
}

js异步请求数据：

$.post("AnalyAction_saleBusineAnaly.jd", {data : JSON.stringify(page_options)}, function(data,status){  
        var result = jQuery.parseJSON(data);
        funnel_title = result.chart_title
        var funnel = eval(result.funnel);//将字符串变为对象
        drawfunnel(funnel); 
    }); 


function drawfunnel(funnel){
    funnel_chart.title.text="销售业务转化("+funnel_title+")";
    funnel_chart.series = funnel;
    $('#container').highcharts(funnel_chart);
}



<img src="https://img-blog.csdn.net/20160726110236752?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />