图表标题重叠在图表上

我想把标题放在图表上，但是当我添加标题时它的重叠图表本身。这里是jsfiddle代码jsfiddle code。你们知道我需要设置什么属性才能使它工作吗？图表标题重叠在图表上

//------------------------------------------------------- 
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) { 
    return ['M',x ,y + width/2,'L',x+height,y + width/2]; 
}; 

//------------------------------------------------------- 
Highcharts.setOptions({ 
    chart:{ 
     defaultSeriesType:'bar', 
     marginTop:5, 
     marginRight:15, 
     marginBottom:10, 
     marginLeft:100,   
     borderWidth:0 
    }, 
    credits:{enabled:false}, 
    exporting:{enabled:false}, 
    title:{text:'Title'}, 
    xAxis:{ 
     tickLength:0, 
     lineColor:'#999', 
     lineWidth:1, 
     labels:{style:{fontWeight:'bold'}}   
    }, 
    yAxis:{ 
     min:0, 
     minPadding:0, 
     maxPadding:0, 
     tickColor:'#ccc', 
     tickWidth:1, 
     tickLength:3, 
     gridLineWidth:0, 
     endOnTick:true, 
     title:{text: ''}, 
     labels:{ 
      y:10, 
      style:{ 
       fontSize:'8px' 
      }, 
      formatter:function(){ 
       if (this.isLast){ 
        return this.value + ' %'; 
       } 
       else{ 
        return this.value; 
       } 
      }, 
      enabled: false 
     } 
    }, 
    legend:{enabled:false}, 
    tooltip:{ 
     enabled:true, 
     backgroundColor:'rgba(255, 255, 255, .85)', 
     borderWidth:0, 
     shadow:true, 
     style:{fontSize:'10px',padding:2}, 
     formatter:function() { 
      return this.series.name + ": <strong>" + Highcharts.numberFormat(this.y,2) + "</strong>"; 
     } 
    }, 
    plotOptions:{ 
     bar:{ 
      color:'#000', 
      shadow:false, 
      borderWidth:0, 
     }, 
     scatter:{ 
      marker:{ 
       symbol:'line', 
       lineWidth:3, 
       radius:8, 
       lineColor:'#f00' 
      } 
     } 
    } 
}); 

//------------------------------------------------------- 
var chart1 = new Highcharts.Chart({ 
    chart:{renderTo:'container1'}, 
    xAxis:{categories:['Title 1']}, 
    yAxis:{ 
     max:100, 
     labels:{y:10,style:{fontSize:'8px'}},  
     plotBands:[{from:0,to:70,color: 'rgba(103,103,103,.35)'}, 
        {from:70,to:85,color: 'rgba(153,153,153,.35)'}, 
        {from:85,to:100,color: 'rgba(204,204,204,.35)'}] 
    }, 
    series:[{name:'Measure',pointWidth:10,data:[80]}, 
      {name:'Target',type: 'scatter',data:[90],}] 
});

来源

2015-07-10 anand

假设你要离开的高度，你图表完全相同，现在是什么，通过适当增加了30像素DIV和30像素的chart.marginTop的高度。

<div id="container1" style="height:66px;width:350px;"></div> 


Highcharts.setOptions({ 
    chart:{ 
     defaultSeriesType:'bar', 
     marginTop:35, 
     marginRight:15, 
     marginBottom:10, 
     marginLeft:100,   
     borderWidth:0 
    },

http://jsfiddle.net/blaird/e96yX/89/

您的问题是，有没有空间您的标题图表的上方，所以highcharts是把它在那里可以。图表边距设置边缘和绘图区域之间的固定间距，因此如果要使用它们，则需要为绘图区域外的项目留出空间。 http://api.highcharts.com/highcharts#chart.marginTop

来源

2015-07-10 23:02:09

图表标题重叠在图表上

回答

相关问题