Как узнать длину горизонтальной полосы в графике. js - PullRequest
Новая
       17

Как узнать длину горизонтальной полосы в графике. js

0 голосов
/ 06 апреля 2020

В моем проекте есть горизонтальная полоса (я использую chart.js). Мне нужно знать его длину (в пикселях). Как это сделать?

1 Ответ

0 голосов
/ 06 апреля 2020

Вы можете использовать Plugin Core API . Он предлагает различные хуки, которые могут быть использованы для выполнения пользовательского кода. В приведенном ниже фрагменте кода я использую хук afterDraw для регистрации количества пикселей отдельных столбцов. 

const chart = new Chart(document.getElementById('myChart'), {
  type: 'horizontalBar',
  plugins: [{
    afterDraw: chart => {      
      var ctx = chart.chart.ctx; 
      var xAxis = chart.scales['x-axis-0'];   
      chart.config.data.datasets[0].data.forEach((value, index) => {
        console.log('index ' + index + ': ' + Math.round(xAxis.getPixelForValue(value)) + 'px'); 
      });      
    }
  }],
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'By Dataset',
      data: [15, 8, 12, 18],
      backgroundColor: 'blue'
    }]
  },
  options: { 
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]     
    }  
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
...