高图中的圆角

我有这样的图形http://jsfiddle.net/developer_fiddle/6VKtb/

我想在这个图中得到圆角但我无法这样做，因为我在这里使用了plotbands。 在此图中是否可以使用圆角？ 也有任何选项可以将圆形标记移动到栏下方。

相关守则

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}); } 

Answer 1

如何使用stacking设置为normal条形图和圆角的插件？ 看看： 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 }] }); 

Answer 2

根据文档和每个实验，似乎没有plotBorderRadius设置。

• http://api.highcharts.com/highcharts#chart

有一个chartBorderRadius，但这只会帮助你填充整个图表区域，这意味着你的标记不能像现在这样延伸到绘图区域之外。

在您当前的代码中，除了“条形”系列类型外，您没有显示任何圆角设置，但我没有在数据中看到条形系列。 条形类型的设置不适用于plotBands或任何其他元素。

我猜你的两个选择是

1）通过将所有边距和间距设置为0来使图形填满整个图表区域，或者2）找到某种复杂的svg代码以手动绘制它