Построение диаграммы рассеяния Chart.js в Django с использованием огромных данных

Я разрабатываю график рассеяния для визуализации тенденции объема продукции для каждого количества продукции.

x: product count
y: product volume

Из django view, два списка массивов были переданы в chart javascript в шаблоне django. Вот код:

<script>
  const volume = {{product_volume}} // <--- array list of product_volume
  const count = {{product_count}} // <--- array list of product_count
  
  const p1ctx = document.getElementById('VolumeChart');
  const P1Chart = new Chart(p1ctx, {     
        data: {
            datasets: [{
              type: 'scatter',
              label: 'Volume',
              data: volume, // <-------------------- Target to assign 'x' and 'y' data
              backgroundColor: 'rgb(255, 99, 132)'
            }],
        },
       .
       .
       .
</script>

Однако, при огромных данных (примерно: 15 000), как я могу упростить процесс маркировки данных в JavaScript, используя список массивов количества и объема продуктов?

Согласно документации к Chart.js диаграмма рассеяния принимает данные как массив с {x: ..., y: ...} парами.

Чтобы перестроить два массива volume и count в эту форму, нужно сделать

const data = count.map((x, index) => ({x, y: volume[index]}));

при условии, что они одинаковой длины.

Вернуться на верх