Как центрировать полукруглую кольцевую диаграмму?

Question

Я пытаюсь отобразить кольцевую или полукруглую диаграмму внутри карты материализации, которая является отзывчивым делением.

Мне нужно отобразить простые данные и использовать диаграмму в качестве индикатора выполнения.Я начал с примера из документации 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

Диаграмма 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/

Answer 2

Вы можете попытаться немного поэкспериментировать с высотой контейнера, 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}]  
});