Chart.js - Как показать значение метки в процентах от значений X и Y - в настоящее время всегда 100% - PullRequest
Новая
       33

Chart.js - Как показать значение метки в процентах от значений X и Y - в настоящее время всегда 100%

0 голосов
/ 28 февраля 2019

Я использую Chart.js вместе с плагином Chart.js, метками диаграммы.Я хочу показать метки вверху гистограммы, а в метке показать процент значения x по отношению к значению y (например, 16 означает 94% от 17), но значения меток всегда равны 100% (который, кажется, вычисляет 16y на 16x = 100).

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

Любой совет / помощь приветствуются!Вот JSBin с кодом: https://jsbin.com/dawenetuya/edit?html,js,output

HTML и JS: 

<div style="width: 100%;"><canvas id="myChart"></canvas></div>

var colors = '#cd1127';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
                labels: ["Asset Taxes", "Excluded Assets", "Personal Injury and Property Damage", "Offsite Disposal", "Royalties", "Litigation", "Employment", "Operating Expenses"],
                datasets: [{
                        data: [16, 14, 17, 13, 15, 12, 9, 11],
                        backgroundColor: '#cd1127',
                        borderColor: '#cd1127',
                        borderWidth: 1
                }]
        },
        options: {
            responsive: true,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        max: 18,
                        beginAtZero:true
                    }
                }]
            },
            plugins: {
                labels: {
                    render: 'percentage',
                    showActualPercentages: true
                }
            }
        }
});

Вот скриншот, иллюстрирующий то, что я собираюсь: Figure 1: All labels showing 100% instead of actual value

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Вы можете создать свою собственную функцию рендеринга следующим образом: 

...

render: function (args) {  
  let max = 17; //This is the default 100% that will be used if no Max value is found
  try {
    //Try to get the actual 100% and overwrite the old max value
    max = Object.values(args.dataset.data).map((num) => {
      return +num; //Convert num to integer
    });
    max = Math.max.apply(null, max);
  } catch (e) {}
  return Math.round(args.value * 100 / max);
}

...

Вот пример кода: https://jsbin.com/hihexutuyu/1/edit

Вы можете фактически стереть блок try/catch и определить только max значение и оно будет работать.Это будет выглядеть так: 

...

render: function (args) {  
  let max = 17; //Custom maximum value

  return Math.round(args.value * 100 / max);
}

...

Блок try/catch предназначен только для автоматического получения максимального значения из набора данных.

Документация плагина со всеми другими возможными настройками, которые могут бытьдобавлено к render здесь: https://github.com/emn178/chartjs-plugin-labels.

0 голосов
/ 28 февраля 2019

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

yAxes:[{
    ticks:{
        callback:function(value,index,values){
            return ((value / index) * 100)+'% ';
        }
    }
}]
...