如何将半圆形甜甜圈图居中？答案

【问题标题】：How do I center a semi-circle doughnut chart?如何将半圆形甜甜圈图居中？
【发布时间】：2019-02-11 13:52:14
【问题描述】：

我正在尝试在具体化卡片中显示一个圆环图或半圆图，这是一个响应式 div。

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

现在我需要将绘图定位在底部，但从顶部移除空白区域。如果我将位置设置在 center:[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}]  
});

这是我得到的结果：

【问题讨论】：

我不确定 highchart 是如何工作的，但您可以在 css 中将 min-height 设置为与宽度相同，这样您将拥有方形元素，并且您可以使用 css 定位它。

标签： javascript css highcharts

【解决方案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}]  
});

【讨论】：

【解决方案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/

【讨论】：