Question

我有这样的图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});
   }

enter image description here

Answer 1

使用设置为stacking的{{1}}和圆角插件时使用条形图怎么样？看看：http://jsfiddle.net/2TuCW/67/

normal

Answer 2

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

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

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

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

我猜你的两个选项是

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

在highcharts中的圆角

2 个答案: