Chart.JS: Как я могу отображать метки данных только тогда, когда размер пончика достаточно велик для текста? - PullRequest
Новая
       17

Chart.JS: Как я могу отображать метки данных только тогда, когда размер пончика достаточно велик для текста?

0 голосов
/ 24 мая 2019

Я использую Chart.JS с плагином Chart.JS datalabel . Можно ли отображать метки данных только тогда, когда размер фрагмента пончика достаточно велик для текста?

У меня есть следующий пример:

https://jsfiddle.net/7vg5w4mq/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
        plugins: [ChartDataLabels],
    type: 'doughnut',
    options:{
      plugins: {
        datalabels: {
          color: '#000000',
          display: true,
          formatter: function (value, ctx) {
            return value + " kWh";
          }
        }
      },
      rotation: 1 * Math.PI,
      circumference: 1 * Math.PI
    },
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red1", "Blue1", "Yellow1", "Green1", "Purple1", "Orange1", "Red2", "Blue2", "Yellow2", "Green2", "Purple2", "Orange2"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 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)',
                '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)',
                '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)',
                '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)',
                '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
        }]
    }
});

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

Если данных много, метки данных переполняют размер среза пончика следующим образом:

enter image description here

Можно ли указать Chart.JS показывать эти ярлыки только тогда, когда текст помещается в пончик? (В противном случае просто покажите подсказки).

Опция просто проверить процент значений не работает, потому что размер самой диаграммы (или размер окна браузера) можно изменить до очень маленького размера (и проценты больше не будут соответствовать).

Примечание: это не тот же вопрос, что и Chart.JS: Как я могу отображать метки данных только тогда, когда ширина полосы достаточно велика для текста? , потому что там я спрашиваю тоже самое, но для гистограммы!

Ответы [ 2 ]

0 голосов
/ 27 мая 2019

Я сейчас использую комбинацию из двух идей:

  • Показать значения только в том случае, если определенный процентный порог значения не превышен
  • Показать значения только в случае определенного графикаширина не опустошена

Пример ниже показывает идею (ы): 

formatter: function(value) {
    let percentage = (value.toFixed(2) / sum) * 100;

    if (percentage > 100) {
        percentage = 100;
    }

    if (percentage < 10) {
        return "";
    }

    if (ctx.width <= 200) {
        return "";
    }

    return value + " kWh";
}
0 голосов
/ 24 мая 2019

Вы пытаетесь @ FranzHuber23 https://stackoverflow.com/a/56275124/6734130 ответить, добавив его на formatter:? Даже несмотря на то, что после числовой метки не отображается «кВт-ч», вы можете добавить легенду чата, объясняющую значение данных, отображаемое в единицах «кВт-ч»

...