Блог

Главная - Вопросы по программированию - Данные группировки диапазонов и метка в Chartjs

Данные группировки диапазонов и метка в Chartjs

#php #chart.js #range #react-chartjs

Вопрос:

Итак, я хотел бы упорядочить свои данные и метки в Chartjs, чтобы я мог правильно их представлять. Пожалуйста, взгляните на эту ссылку, которая точно показывает, что я пытаюсь сделать.

введите описание изображения здесь

Вы можете видеть, что данные сгруппированы и ранжированы в соответствии с итогами заказов. Затем панель отображает общее количество заказов.

Здесь следует отметить одну вещь: эти данные изменятся при изменении указанного диапазона дат. Однако на диаграмме всегда должно быть не более 6 меток, даже если диапазон дат изменяется, то есть набор данных изменяется (увеличивается).

Теперь я хотел бы знать, возможно ли это непосредственно в Chartjs, где я добавляю какое-то необычное значение параметра, чтобы оно работало автоматически, или, поскольку я работаю с PHP в бэкэнде, в PHP есть способ, с помощью которого я могу динамически разделять эти элементы, зная только диапазон дат.

Пожалуйста, дайте мне знать, если потребуются дополнительные объяснения. Любая помощь будет признательна.

PS: У меня есть доступ к базе данных, и у меня есть все данные, необходимые для отображения на диаграмме, просто нужно отобразить их в указанном формате.

Ответ №1:

Вы можете использовать обратный вызов тиков для фильтрации тиков:

 var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
        backgroundColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7, 7, 11, 5, 8, 3, 7, 7, 11, 5, 8, 3, 7, 7, 11, 5, 8, 3, 7],
        backgroundColor: 'lime'
      }
    ]
  },
  options: {
    scales: {
      x: {
        ticks: {
          callback: function(value, index, values) {
            let skips = values.length / 6;

            return index % skips === 0 ? this.getLabelForValue(value) : ''
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options); 
 <body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

Комментарии:

1. Спасибо за вашу помощь, однако у него нет никакого диапазона. В моей операции вы можете видеть, что метки варьируются, например, от 62 до 92 долларов, а затем заказы с их суммами в диапазоне от 62 до 92 долларов попадут в эту группу.

2. Возможно, вам захочется прояснить ваш вопрос, потому что единственное, что я из этого делаю, — это то, что вы хотите показывать максимум 6 меток, даже когда набор данных увеличивается, что происходит в моем примере

3. Слово «диапазон» находится в вопросе.

4. да, чего вы хотите от диапазона, вы показываете только изображение диаграммы, никакого кода, в котором вы пытаетесь что-то решить самостоятельно, а затем диапазон должен волшебным образом прояснить, чего вы хотите? Даже если ваш диапазон данных изменяется таким образом, что он становится больше, это работает, потому что это переоценивает обратный вызов

Метки: