Внутренний размер круговой диаграммы (HighChart), получающий изменение со значениями, указанными в серии - PullRequest
Новая
       35

Внутренний размер круговой диаграммы (HighChart), получающий изменение со значениями, указанными в серии

0 голосов
/ 08 ноября 2018

Я использую HichChart для представления кольцевой (круговой) диаграммы в моем угловом приложении. Проблема заключается в том, что «внутренний размер» графика изменяется с учетом значений, указанных в серии. Диаграмма имеет только два значения в серии. Например, внутренний размер диаграммы становится очень тонким, когда я задаю значения ряда как 50 и 50. Хорошо выглядит, если я задаю значения как 20 и 80.

Интересно то, что если я запускаю тот же код, который я написал для сценария 50 и 50 в JsFiddle, внутренний размер диаграммы не уменьшается. (Обратите внимание, что в JsFiddle я выбрал наиболее подходящие настройки для разработчиков - JavaScript + AngularJS 2.0.0-alpha.47).

В Моем приложении файл package.json отображает версии старшей диаграммы в виде «старших диаграмм»: «^ 6.1.4», «угловых диаграмм»: «^ 2.3.0». Пожалуйста, найдите мою угловую версию и некоторую дополнительную информацию ниже. Пожалуйста, помогите мне раскрыть эту тайну. 

setCompletedTasksDonutChartRM(completedTasks, notCompletedTasks) {
this.donutChartOptionsForRM_Completed = {
  chart: {
    type: 'pie'
  },
  credits: {
    enabled: false
  },
  title: {
    text: ''
  },
  plotOptions: {
    pie: {
      innerSize: 250
    }
  },
  colors: ['#F0F0F0', '#4BB482', '#4cb581'],
  series: [{
    name: 'Tasks (%)',
    data: [
      ['Not completed', 50],
      ['Completed', 50],
    ]
  }]
};
}

https://jsfiddle.net/kushannc/4pLkbtzc/5/

enter image description here

enter image description here

enter image description here

1 Ответ

0 голосов
/ 08 ноября 2018

Решение очень простое. Когда вы устанавливаете 50, 50 dataLables располагаются горизонтально и занимают много места, значение innerSize фиксируется (в вашем примере innerSize = 250), поэтому единственный вариант размещения диаграммы в области графика - это уменьшение толщины круговой диаграммы. Проверьте те же настройки на более широком экране, и вы увидите это.

Решением является использование innerSize в качестве процента пирога.

Код: 

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  credits: {
    enabled: false
  },
  title: {
    text: ''
  },
  plotOptions: {
    pie: {
      innerSize: '70%'
    }
  },
  colors: ['#F0F0F0', '#4BB482', '#4cb581'],
  series: [{
    name: 'Tasks (%)',
    data: [
      ['Not completed', 50],
      ['Completed', 50],
    ]
  }]
});

Демо-версия: https://jsfiddle.net/BlackLabel/c0Lyx3jo/2/

...