highcharts

最新推荐文章于 2024-09-17 08:39:00 发布

daixuzong

最新推荐文章于 2024-09-17 08:39:00 发布

阅读量292

点赞数 1

分类专栏： highcharts 文章标签： highcharts

本文链接：https://blog.csdn.net/daixuzong/article/details/52911077

版权

highcharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <meta chartset="UTF-8">
    <script type="text/javascript" src="/Public/js/jquery.min.js"></script>
    <script type="text/javascript" src="/Public/js/Highcharts/highcharts.js"></script>
    <script type="text/javascript" src="/Public/js/Highcharts/modules/exporting.js"></script>
    <script type="text/javascript" src="/Public/js/Highcharts/themes/grid-light.js"></script>
    <script type="text/javascript" src="/Public/js/Highcharts/highcharts-3d.js"></script>
    <title>highcharts</title>
</head>
<body>
    <div id="container" style="width:90%;height:50%"></div>
<script>
//定义一个全局颜色数组  
 var colorArr = ['#FCB8D1', '#FEDFC0', '#AEF0C0','#FCB8D1', '#FEDFC0', '#AEF0C0','#FCB8D1', '#FEDFC0', '#AEF0C0','#FCB8D1']; 
 var colorArrTwo = ['#FC1769', '#FF9C3D', '#2EB665', '#FC1769', '#FF9C3D', '#2EB665', '#FC1769', '#FF9C3D', '#2EB665', '#FC1769'];

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar',//所要绘制的图的类型
            },
            labels: {
                items: [{                       // items 数组，可以设置多个标签
                    html: '毛利完成率',
                    style: {                    // 标签样式，会继承和重写上层全局样式
                        left: '0px',
                        top: '-29px',
                        color: '#6F7D88',
                        fontSize: '18px',
                        fontWeight: 'normal',
                        fontFamily: '' 
                    }
                }]
            },
            exporting: {   
                enabled: false  //设置导出按钮不可用    
            },
           title: {     //表标题
                align: 'left',
                style:{
                    color: '#fff',
                    fontSize: '31px',
                },
                text: '二级部门毛利完成率排行'
            },
            subtitle: {     //副标题
                align: 'left',
                style:{
                    color: '#6F7D88',
                    fontSize: '18px',
                },
                text: '部门'
            },
            xAxis: {
                categories: ['供应链事业部', '会员事业部', '子平台事业部', '酒店事业部', '联合采购事业部'],
                title: {
                    text: ''
                },
                labels: {
                    style: {
                        color: '#6F7D88',//颜色
                        fontSize:'18px',  //字体
                    }
                },
                gridLineWidth: 0,
                lineWidth: 0,
                tickWidth: 0
            },
            yAxis: {
                min: 0,
                //max: 100,
                title: {
                    text: '横坐标标题',
                    align: 'high',
                    enabled: false
                },
                labels: {
                    overflow: 'justify',
                    enabled: false
                },
                visible: false
            },
            plotOptions: {
                bar: {
                    colorByPoint:true,
                    dataLabels: {
                        enabled: true, // 在节点显示数据
                        color:  ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),  // 设置节点显示数据字体的颜色
                        formatter: function() {
                             //console.log(this.point.color);
                            return '<span style="color:'+this.point.color+';">'+this.y+'%</span>';  // 重新设置节点显示数据
                        }
                    },
                },     
            },
            tooltip: {
                valueSuffix: '%'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                shadow: true,
                enabled: false
            },
            //图表版权信息
            credits: {
                enabled: false
            },
            series: [{
                name: '完成率',
                 data: [
                        {'color': 'red', 'y': 100,},
                        {'color': 'yellow', 'y': 89},
                        {'color': 'blue', 'y': 78},
                        {'color': 'green', 'y': 68},
                        {'color': 'orange', 'y': 59}
                    ]
            }],
        },function (chart) {  
            SetEveryOnePointColor(chart); 
        });
     }
function SetEveryOnePointColor(chart) {              
    //获得第一个序列的所有数据点  
    var pointsList = chart.series[0].points;  
    //遍历设置每一个数据点颜色  
    for (var i = 0; i < pointsList.length; i++) {  
        //alert(colorArr[i]);
        chart.series[0].points[i].update({  
           color: {  
              linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果  
              stops: [   
                 [0, Highcharts.Color(colorArrTwo[i]).setOpacity(0.9).get('rgba')],  
                 [1, colorArr[i]]
                  ]    
                }  
     });  
}  
}  
</script>
</body>
</html>