首页 > 代码库 > 柱形图,饼状图JavaScript

柱形图,饼状图JavaScript

<script type="text/javascript">
    $(function () {
    $(‘#container_2‘).highcharts({
        chart: {
        //type指定柱状图显示
            type: ‘column‘,
         
        },
       
        title: {
        //柱状图标题
            text: ‘‘
        },
        subtitle: {
            text: ‘数据截止 2017-06‘
        },
         credits: {  
                    enabled: false   //右下角不显示LOGO  
                },
        exporting: {//Highcharts 图表导出功能模块。  
                    enabled: false  
                },
        xAxis: {
            type: ‘category‘,
            labels: {
            //x轴倾斜度
                rotation: -45,
                style: {
                //字体大小
                    fontSize: ‘13px‘,
                    //字体风格
                    fontFamily: ‘Verdana, sans-serif‘
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
            //y轴标题
                text: ‘单位(万元)‘
            }
        },
        legend: {
        //y轴
            enabled: false
        },
        tooltip: {
        //获取光标时保留两位小数
            pointFormat: ‘费用: <b>{point.y:.2f} 万元</b>‘
        },
         //让柱状图上数字溢出显示     
plotOptions: {
    column: {
        dataLabels: {
        overflow: "none",
        crop: false,
        }
    }

},
        series: [{
       //y轴显示
            name: ‘‘,
            data: [
                        [‘资料费‘,${zlf}],  
                        [‘讲课费‘,${jkf}],  
                        [‘场地费‘,${cdf}],  
                        [‘学员补助‘,${xybz}],
                        [‘其他支出‘,${qtzc}]
                         
            ],
            dataLabels: {
            //显示数字y轴
                enabled: true,
                rotation: 0,
                color: ‘#000000‘,
                
                align: ‘center‘,
                //y轴显示保留两位小数
                format: ‘{point.y:.2f}‘, // one decimal
                //字体在柱状图上下移动
                y: 0, // 10 pixels down from the top
                style: {
               //y轴字体大小
                    fontSize: ‘13px‘,
                    //y轴字体风格
                    fontFamily: ‘Verdana, sans-serif‘
                }
            }
        }]
    });
});
    
</script>    
<script type="text/javascript">  
           $(function() {  
                $(‘#container_1‘).highcharts({  
                chart: {  
                //type指定饼状图显示
                    type: ‘pie‘,  
                    //背景颜色
                    backgroundColor:"#FFFFFF",  
                    x:-200,  
                    //圖形大小
                    height: 300,  
                    //居左距離
                    marginLeft:-200
                     
                },  
                credits: {  
                    enabled: false   //右下角不显示LOGO  
                },  
                title: {  
                //餅狀圖上面不加字标题
                    text: ‘‘,  
                },  
                subtitle: {  
                //餅狀圖上面不加字
                    text: ‘‘,  
                },  
                exporting: {
                //Highcharts 图表导出功能模块。  
                    enabled: false  
                },  
                //图形颜色
                colors: [‘#E2214E‘, ‘#F7B52B‘],
                //饼状图旁边显示的比例的事件  
                legend: {  
                //垂直
                    layout: ‘true‘,  
                    floating: true,  
                    backgroundColor: ‘#FFFFFF‘,  
                    align: ‘right‘,  
                    verticalAlign: ‘top‘,  
                    //调整饼状图旁边的比例靠上还是靠下
                    y: 35,  
                  //调整饼状图旁边的比例靠左还是靠右
                    x: -20,  
                    itemMarginBottom :2,//图例的上下间距  
                    //区域大小
                    maxHeight: 200,  
                    symbolHeight: 14,//图例高度 及大小
                    //小图标与比例的距离
                    symbolWidth:14  
                },  
                
                plotOptions: {  
                    pie: {  
                        allowPointSelect:false,  
                        cursor: ‘pointer‘,  
                        dataLabels: {  
                        //是否显示饼状图上的拉线
                            enabled: false  
                        },  
                        
                        showInLegend: true,  
                        symbolWidth: 24,  
                        point: {  
                            events: {  
                                legendItemClick: function (e) {  
                                    return false; // 直接 return false 即可禁用图例点击事件  
                                }  
                            }  
                        }  
                    }  
                },  
                
                series: [{  
                    data: [  
                        [‘专项经费‘+‘‘ +‘<span style="text-align:center;"><fmt:formatNumber value="http://www.mamicode.com/${zxjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>‘+‘%‘+‘</span>‘,<fmt:formatNumber value="http://www.mamicode.com/${zxjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>],  
                        [‘自筹经费‘+‘‘+‘<span style="text-align:center;"><fmt:formatNumber value="http://www.mamicode.com/${zcjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>‘+‘%‘+‘</span>‘,<fmt:formatNumber value="http://www.mamicode.com/${zcjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>]
                          
                    ]  
                }]  
            });  
        });  
             
    </script>

 

 

//注意记得一定要引用highcharts.js文件

 

柱形图,饼状图JavaScript