高层建筑中的圆角 [英] Rounded corners in highcharts

问题描述

我有这样的图表

  var chart = new Highcharts.Chart（{
 
图表：{
 renderTo：'container'，
类型：'bar'
}，
 
 xAxis：{
类别：['Jan'，'Feb'，'Mar'，'Apr'，'May' ，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] 
}，
 plotOptions：{
 bar：{
堆积：'正常'
} 
}，
 yAxis：{
 endOnTick：false，
 maxPadding：0 
}，
 
 series：[{
 data：[29.9]，
 // usage：
 borderRadiusTopLeft：25，
 borderRadiusTopRight：25 
}，{
数据：[29.9] 
}，{
数据：[29.9] 
}，{
数据：[29.9] 
}，{
数据：[29.9]，
 borderRad iusBottomRight：25，
 borderRadiusBottomLeft：25 
}] 
 
}）; 
  

I have graph like this http://jsfiddle.net/developer_fiddle/6VKtb/

I want to get the rounded corners in this graph but I am unable to do so probable because I have used plotbands here . Is it possible to have rounded corners in this graph? Also is there any option available to move the circle marker little below the bar.

Relevant Code

function drawGraph(point,container)
   {
      Highcharts.setOptions({
            chart:{
                type:'bar',
                margin:[15,15,35,15],
                plotBorderWidth: 1,
                plotBorderColor: '#999',
            },
            credits:{enabled:false},
            legend:{enabled:false},
            title:{text:''},
            xAxis:{
                tickLength:0,
                lineWidth:0,
                labels: ""      
            },
            yAxis:{
                min:1,
                tickColor:'#888',
                tickWidth:2,
                tickLength:6,
                tickInterval:1,
                minorTickInterval:5,
                minorTickWidth:2,
                minorTickLength:4,
                minorGridLineWidth:0,
                tickPosition: 'outside',
                gridLineWidth:1,
                endOnTick:false,
            },

            plotOptions:{
                    series: {
                        animation: false,          
                     },
                bar:{
                        borderRadius:10,  
                    },
                scatter:{
                      animation:false,
                      marker:{ 
                         radius:'15',
                         fillColor : '#F00',
                    }
                }
            }
        });

        var chart1 = new Highcharts.Chart({
            chart:{renderTo:container},
            xAxis:{max:1},
            yAxis:{
                  title:{ 
                     text:'',
                  },
                max:10,
                labels:{y:20,style:{fontSize:'11px'}},    
                plotBands:[{from:1,to:1.5,color: 'rgba(214,69,41,.3)'},
                           {from:1.5,to:3.5,color:'rgba(240,168,57,.3)'},
                           {from:3.5,to:5,color: 'rgba(209,218,85,.3)'},
                           {from:5,to:6,color: 'rgba(166,199,111,.3)'},
                           {from:6,to:7.5,color: 'rgba(130,182,69,.3)'},
                           {from:7.5,to:9.5,color: 'rgba(106,150,49,.3)'},
                           {from:9.5,to:10,color: 'rgba(82,121,44,.3)',outerRadius: '105'}]
            },
            series:[
                {name:'Target',type: 'scatter',data:[[0,0]]}]
        });
        point = parseInt(point);
        chart1.series[0].points[0].update({x:0,y:point}, true, {duration: 1000});
   }

解决方案

How about using bar chart with stacking set to normal and plugin for rounded corners? Take a look: http://jsfiddle.net/2TuCW/67/

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'bar'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        bar: {
            stacking: 'normal'   
        }
    },
    yAxis: {
        endOnTick: false,
        maxPadding: 0
    },

    series: [{
        data: [29.9],
        // usage:
        borderRadiusTopLeft: 25,
        borderRadiusTopRight: 25
    }, {
        data: [29.9]
    }, {
        data: [29.9]
    }, {
        data: [29.9]
    }, {
        data: [29.9],
        borderRadiusBottomRight: 25,
        borderRadiusBottomLeft: 25
    }]

});

这篇关于高层建筑中的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！