highcharts

好久没分享东西了,然后想想还是来分享点现成又好用的东西吧,摸了一年的PHP,发现自己所知还是甚浅。前两天又被调到公司的产品组里,也就用到了这个叫highcharts插件的东西。

因为目前项目刚起步，很多数据表跟接口都没有出来，数据都是用自己造的数据替代的,大家就将就看下吧.

一些引用的东西,我就不贴了.只贴代码：

JS：

/**
 * 
 */
$(function(){

    var chartConfig = {};
    // 饼图的配置参数
    chartConfig.pieChartConfig = {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                backgroundColor:'#FBFBFB',
            },
            credits:{
                enabled:false
            },
            exporting:{
                enabled:false
            },
            legend: {
                enabled:true,
                align:'right',
                layout:'vertical',
                verticalAlign:'middle',
                symbolRadius:15
            },
            title: {
                text: ''
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '{point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        },
                        inside:true,
                    },
                    innerSize:50,
                    showInLegend:true
                }
            },
            series: [{
                type: 'pie',
                name: '错题来源',
                data: [
                       ['课堂互动',30],
                       ['考试',30],
                       ['作业',40]
                       ],
                dataLabels:{
                    reserveSpace:false
                }
            }]
    };
    
    // 柱状图的配置参数
    chartConfig.barChartConfig = {
            chart: {
                type: 'bar'
            },
            credits:{
                enabled:false
            },
            exporting:{
                enabled:false
            },
            title: {
                text: '出错原因分析'
            },
            xAxis: {
                categories: ['题型不会', '不会做/概念不清/记忆不清', '考试时间不够', '计算错误/题目看错','其他']
            },
            yAxis: {
                min: 0,
                title: {
                    text: '答题人数'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
            series: [{
                name: '人数',
                data: [{'color':'#F6BD0F','y':2}, 
                   {'color':'#AFD8F8','y':5}, 
                   {'color':'#8BBA00','y':9}, 
                   {'color':'#FF8E46','y':12}, 
                   {'color':'#008E8E','y':15}]
            }]
        };

//    var layerOpen = {
//            overview:function(id,title){
//                //页面层
//                layer.open({
//                    type: 1,
//                    title:title,
//                    shade:0.5,
//                    area: ['580px', '390px'], //宽高
//                    content: $('#'+id)
//                });
//            },
//    };
    $('#pie-container').highcharts(chartConfig.pieChartConfig);
    $('#bar-container').highcharts(chartConfig.barChartConfig);
//    // 点击总览弹出图表的统计信息
//    $('.btn-totalview').click(function(){
//        layerOpen.overview('pie-container','总览');    
//    });
//
//    // 答题统计弹出的图表
//    $('.btn-totalpro').click(function(){
//        layerOpen.overview('bar-container','答题统计');
//    });

});

HTML:

<div class="wrongcon-list mgt30 clearfix">
                        <div class="wrong-source mgr25 fl">
                            <div class="title clearfix">
                                <h3>错题来源</h3>
                            </div>
                            <div id="pie-container"  class="wrongsource-con clearfix">
                            
                            </div>
                        </div>
                        <div class="wrong-source fl">
                            <div class="title clearfix">
                                <h3>出错原因分析</h3>
                            </div>
                            <div id="bar-container" class="wrongsource-con clearfix">
                            
                            </div>
                        </div>
                        
                    </div>

效果图：

   highcharts官网：http://www.hcharts.cn/

   这东西很简单,只要在项目里引入这个插件,再从html里引入,即可。代码copy过去可以直接用。至于具体的参数是什么意思什么的在这里也就不多说了,网络上一大堆。分享的目的也无非就是弄一个现成的给大家用。