2014-01-31 108 views
1

我一直在試圖從HighCharts 半圓圈甜心刪除邊距和填充。HighCharts半圈甜甜圈,刪除邊距和填充

我試過margin: [0,0,0,0]和所有不同的四個間距屬性。我也嘗試將plotOptions的size屬性設置爲100%。

我創建了一個jsfiddle http://jsfiddle.net/W7bXw/1/來演示問題以及我嘗試過的選項。正如你所看到的,半圓和容器之間還有很大的填充物。

有趣的是,將邊距或間距設置爲0可以在來自HighCharts的常規餡餅上工作。

UPDATE

根據接受的答案此圖表的解決方案是與用於容器的顯式高度一起使用負餘量。

回答

4

這應該可以幫助您:http://api.highcharts.com/highcharts - http://api.highcharts.com/highcharts#chart.margin 在這裏你可以找到你如何讓你的圖表的填充小,或0 加入這個圖表腳本,當你需要他們適應你的頁面更改值

chart: { 
      marginTop: 10, 
      marginBottom: 100, 
      marginLeft: 100, 
      marginRight: 100 
} 

UPDATE: 檢查:http://jsfiddle.net/W7bXw/2/

你要的寬度設置爲您的DIV的#container和j然後設置邊距。

+0

正如問題中所述,並在jsfiddle中顯示它不適用於半圓環。嘗試編輯小提琴並更新它,如果你得到它的工作。 – elbuild

+0

檢查上面,我更新了答案。 –

+0

我看到你在使用負邊距,而且幾乎沒問題。我會努力獲得我想要的。謝謝。 – elbuild

0

我想這是你所期望

series: [{ 
     pointPadding: 0, 
     groupPadding: 0, 
     type: 'pie', 
     size: '100%', 
     name: 'Browser share', 
     innerSize: '150%', 
     data: [ 
      ['Firefox', 45.0], 
      ['IE',  26.8], 
      ['Chrome', 12.8], 
      ['Safari', 8.5], 
      ['Opera',  6.2], 
      ['Others', 0.7] 
     ] 
    }] 

變化innerSize至150%,並嘗試

0

下列選項我

在圖表選項工作,由負移動圖表向上上下邊距。

chart: { 
    marginTop: -50, 
    marginBottom: -50, 
    marginLeft: 0, 
    marginRight: 0, 
} 

劇情內選項大小應該是size: '100%'

plotOptions: { 
    pie: { 
     dataLabels: { 
      enabled: true,      
      style: { 
       fontWeight: 'bold', 
       color: 'black', 
      } 
     }, 
     size: '100%', 
     startAngle: -90, 
     endAngle: 90, 
     center: ['50%', '75%'] 
    } 
},