高层建筑中的圆角 [英] 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屋!
查看全文