Как правильно визуализировать график js с большой разницей между данными бара? - PullRequest
Новая
       3

Как правильно визуализировать график js с большой разницей между данными бара?

0 голосов
/ 20 июня 2020

Мне нужно визуализировать гистограмму, которая иногда имеет огромную разницу между значениями данных. Таким образом, наибольшие значения отображаются нормально, но другие, которые кажутся небольшими по сравнению с другими, отображаются неправильно.

Как я могу улучшить свою диаграмму, предоставляя пользователю возможность видеть в списке пропорциональную часть минимальных значений?

enter image description here

1 Ответ

0 голосов
/ 20 июня 2020

Вы можете определить yAxis как логарифм c декартову ось , как показано во фрагменте исполняемого кода ниже. 

new Chart("chart", {
  type: "bar",
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: "My Dataset",
      data: [50, 11780, 220855, 581358],
      backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)"],
      borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)"],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        type: 'logarithmic',
        ticks: {
          userCallback: (value, index) => {
            const remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));
            if (remain == 1 || remain == 2 || remain == 5 || index == 0) {
              return value.toLocaleString();
            }
            return '';
          }
        },
        gridLines: {
          display: false
        }        
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="180"></canvas>
...