HighCharts堆积柱形图(Stacked column)添加连线

项目中需要堆积柱形图(Stacked column chart) 的连线效果 结果找了许多图表都没有，看着highcharts还不错，就自己想办法添加了。在线测试地址：http://jsfiddle.net/cqzhangkang/LTsku/4/

添加前效果：

 

添加后效果

 

实现代码：

$(function () {
        
    var defaultColors = ['#058DC7', '#50B432','#DDDF00', '#ED561B',  '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];
    Highcharts.setOptions({colors : defaultColors});
    /*** 渐变效果**
    Highcharts.getOptions().colors = Highcharts.map(defaultColors, function(color) {
	    return {
	        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
	        stops: [
	            [0, color],
	            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
	        ]
	    };
	});
    */
    
    var categoriesArr = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas','hello'];
    var data = [{
                type: 'column',
                name: 'John',
                data: [15,5, 3, 4, 7, 2]
            }, {
                type: 'column',
                name: 'Jane',
                data: [12,12, 12, 12, 12, 12]
            }, {
                type: 'column',
                name: 'Joe',
                data: [19,3, 4, 4, 2, 5]
            }, {
                type: 'column',
                name: 'go',
                data: [100,80, 20, 80, 90, 70]
            }];
       var len = data.length;
    var total = [];
    for(var i=0;i<categoriesArr.length;i++){
        total[i] = 0;
        for(var j=0;j<len;j++){
            total[i] += data[j].data[i];
        }
    }
    for(var i=len-1;i>=0;i--){
        var tmpData = [];
        var dd = data[i].data;
        for(var j=0;j<dd.length;j++){
            if(i == len-1){
                tmpData[j] = dd[j]*100/total[j];
            }else{
                tmpData[j] = dd[j]*100/total[j] + data[len+i + 1].data[j];
            }
        }
        data[len+i] = {
            type: 'spline',
            name: data[i].name,
            data: tmpData,
            tooltip : {
                pointFormat : ''
            },
            color: '#E5C16F',
            marker: {
                symbol : 'circle',
                lineColor: '#FFFFFF',
                fillColor:'#E5C16F'
                //fillColor: Highcharts.getOptions().colors[i]
            }
        };
        if(i == 0){
            data[len].visible = false;
        }
    }
        $('#container').highcharts({
            chart: {
                //type: 'column'
                events : {
                    redraw : function(){
                        //this.series = data;
                    }
                }
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: categoriesArr
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                }
            },
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                shared: true
            },
            credits : {
                enabled : false
            },
            legend : {
                borderWidth : 0
            },
            plotOptions: {
                column: {
                    stacking: 'percent',
                    showInLegend : true,
                    events : {
                        legendItemClick: function(event) {
                            //alert("点击了："+this.name)
                            event.preventDefault();
                        }
                    }
                },
                spline: {
                    //stacking: '',
                    connectNulls : true,
                    showInLegend : false
                }
            },
            series: data 
        });
    });

 

 

评论

2 楼 chamcon 2015-03-14  

627837572 写道

您好，这个堆积柱形图能添加数据标签吗？每一块都显示各自的百分比？

可以 添加dataLabels配置就可以

1 楼 627837572 2015-03-11  

您好，这个堆积柱形图能添加数据标签吗？每一块都显示各自的百分比？