Question

我正在尝试在物化卡内显示一个甜甜圈或半圆形图表，这是一个有响应的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之间进行调整，以获得正确的尺寸。请检查下面的代码。我已将图表的高度更改为200px，居中更改为['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/

如何居中半圆甜甜圈图？

2 个答案: