2015-07-10 157 views
0

我想把標題放在圖表上,但是當我添加標題時它的重疊圖表本身。 這裏是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],}] 
}); 

回答

0

假設你要離開的高度,你圖表完全相同,現在是什麼,通過適當增加了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