angular-chart.js кольцевая диаграмма: как изменить ширину дуги пончика?

Я использую библиотеку angular-chart.js(https://jtblin.github.io/angular-chart.js/ ) для реализации кольцевой диаграммы.

Как изменить ширину дуги бублика?


chart.js angularjs angular-chart
person user3709671    schedule 18.08.2016    source источник
comment
Вы проверили параметры chart.js: chartjs.org/docs/# варианты круговой диаграммы-бублика?   -  person jtblin    schedule 19.08.2016
comment
На этот вопрос уже был дан ответ здесь.   -  person Ankur    schedule 23.11.2016

Ответы (1)


arrow_upward
7
arrow_downward

Вам просто нужно установить опцию «cutoutPercentage» в настройках диаграммы. Значение по умолчанию для кольцевой диаграммы — 50. Числа ближе к 100 будут иметь больше пустого пространства в середине, числа ближе к 0 будут иметь меньше пустого пространства в середине кольцевой диаграммы.

В вашем контроллере:

$scope.options = {cutoutPercentage: 75};
$scope.data = [213, 546];
$scope.labels = ['Label 1', 'Label 2'];

В вашем html:

<canvas class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-options="options"> </canvas>
person Felipe de Alvarenga Leite    schedule 25.08.2016