如何中心一个半圆圆环图？

Question

我试图显示Materialise的卡，这是一个负责任的div内的环形或半圈图。

我需要显示简单的数据，并使用图表作为进度条。我从HighCharts文档中的例子开始。

现在我需要定位在底部的情节，而是从顶部移除空白。如果我设置位置中心：[50％，50％]有在容器的底部处的空白空间。

有没有一种方法可以裁剪容器，并保持宽高比的高度？

这是我使用的代码：

var data = [  
{  
    name: 'Done',  
    y: 76.1,  
    color: "#ff6666",  
    dataLabels: {  
      enabled: false  
    }  
  },  
  {  
    name: 'To do',  
    y: 23.9,  
    color:"#dddddd",  
    dataLabels: {  
      enabled: false  
    }  
  }  
];  

Highcharts.chart('container', {  
  chart: {  
    plotBorderWidth: 0,  
    height:"400px"  
  },  
  title: {  
    text: 'Title'  
  },  
  tooltip: {  
    pointFormat: '<b>{point.percentage:.1f}%</b>'  
  },  
  plotOptions: {  
    pie: {  
      dataLabels: {  
        enabled: true,distance: -50,  
        style: {fontWeight: 'bold', color: 'white'}  
      },  
      startAngle: -90,  
      endAngle: 90,  
      center: ['50%', '100%']  
    }  
  },  
  series: [{type: 'pie',name: 'Value',innerSize: '70%',data: data}]  
});  

下面是结果我得到：

Answer 1

你可以尝试与周围的容器高度，plotOptions.pie.center和plotOptions.pie.size有点发挥，以获得正确的尺寸。请检查下面的代码。我已经改变图表的高度至200像素，中心至['50％“ '70％”]和加入的200％的大小。

看到这里的样本：https://codepen.io/anon/pen/pGVyQX?&editable=true

var data = [  
{  
    name: 'Done',  
    y: 76.1,  
    color: "#ff6666",  
    dataLabels: {  
      enabled: false  
    }  
  },  
  {  
    name: 'To do',  
    y: 23.9,  
    color:"#dddddd",  
    dataLabels: {  
      enabled: false  
    }  
  }  
];  

Highcharts.chart('container', {  
  chart: {  
    plotBorderWidth: 0,  
    height:"200px"
  },  
  title: {  
    text: 'Title'
  },  
  tooltip: {  
    pointFormat: '<b>{point.percentage:.1f}%</b>'  
  },  
  plotOptions: {  
    pie: {  
      dataLabels: {  
        enabled: true,
        distance: -50,  
        style: {fontWeight: 'bold', color: 'white'}  
      },  
      startAngle: -90,  
      endAngle: 90,  
      center: ['50%', '70%'],
      size: "200%"
    }  
  },  
  series: [{type: 'pie',name: 'Value',innerSize: '70%',data: data}]  
});

Answer 2

Highcharts图表由若干HTML元素。该height选项用于设置高度风格为你的图表容器所创建的HTML元素的子元素。

你的问题的解决方案，可以设置不同的高度：

CSS：

#container {
    height: 200px;
    ...
}

JS：

chart: {
    height: 400
},

series: [{
    type: 'pie',
    name: 'Value',
    innerSize: '70%',
    center: ['50%', '50%'],
    data: data
}]

现场演示：http://jsfiddle.net/BlackLabel/du60mrgp/