使用大量数据在Django中绘制Chart.js散点图

xqk2d5yq  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(238)

我正在开发一个散点图,以可视化每个产品数量的产品数量趋势。

x: product count
y: product volume

从django视图中,两个数组列表被传递到django模板中的图表javascript中。代码如下:

<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中的数据标记过程?

aoyhnmkz

aoyhnmkz1#

根据Chart.js的文档,散点图将数据作为具有{x: ..., y: ...}对的数组接受。
要将两个数组volumecount重新调整为该形状,您可以执行以下操作

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

假设它们的长度相同。

相关问题