Как в Chart.Js 2.8.0 отображать тексты только в том случае, если они вписываются в дугу?
У меня есть кольцевая диаграмма в Chart.Js с включенным chartjs-плагин-метки данных. Как я могу записать строку в сегменты только в том случае, если они вписываются в сегмент диаграммы?
На данный момент мой код выглядит так:
let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 0.3, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
plugins: {
datalabels: {
formatter: function(value) {
return value + " kWh";
}
}
},
rotation: 1 * Math.PI,
circumference: 1 * Math.PI
}
});<body>
<canvas id = "myChart" width = "400" height = "400"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]"></script>
</body>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Может быть, это может работать? Добавлять метку только тогда, когда значение превышает определенный порог?
let data = [12, 19, 3, 5, 0.3, 3];
let sum = 0;
for (var i = 0; i < data.length; i++) {
sum += data[i]
}
let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
plugins: {
datalabels: {
formatter: function(value) {
percentage = (value / sum) * 100;
if (percentage < 1) {
return "";
}
return value + " kWh";
}
}
},
rotation: 1 * Math.PI,
circumference: 1 * Math.PI
}
});<body>
<canvas id = "myChart" width = "400" height = "400"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]"></script>
</body>Это работает в зависимости от размера самой диаграммы. Если диаграмма действительно мала, пороговое значение необходимо динамически регулировать в соответствии с размером дуги. Но я буду использовать это решение на данный момент.
Кроме того, это не будет работать, если все значения малы. Например. если есть 3 значения, и все они меньше 1, каждое значение получит около 33% дуги ;) Проверьте это, например: jsfiddle.net/6035nL1u. В целом мне нравится идея с порогом, но должен быть метод для получения дуги (например, в градусах) текущего сегмента, в который записывается текст.
да. позвольте мне посмотреть, есть ли способ сделать это умнее.
Там это работает лучше? Я просто использовал прямой процент на данный момент. Но вы также должны быть в состоянии рассчитать угол дуги
Рад, что смог помочь!
В моем случае мне пришлось суммировать данные следующим образом: let sum = dataSets.reduce((t, d) => t + d.data.reduce((a, b) => a + b), 0).toFixed(2);, где dataSets — весь объект набора данных (это единственное, что мне нужно было повторить).
@Adnan Sharif: Спасибо за редактирование, я не знал, как добавить этот пример запуска фрагментов :)