在Django中使用Chart.js绘制散点图：大数据量数据标记优化

针对你15000条数据的场景，有两种简洁高效的方式来完成X/Y数据的标记流程：

方案1：前端原生JS快速合并数组 #

Chart.js散点图要求data为包含x和y属性的对象数组，用Array.map()可以快速将两个输入数组合并，性能完全覆盖15000条数据的需求：

const volume = {{product_volume}};
const count = {{product_count}};

// 一键生成散点图所需的格式
const scatterData = count.map((xVal, idx) => ({
  x: xVal,
  y: volume[idx]
}));

const p1ctx = document.getElementById('VolumeChart');
const P1Chart = new Chart(p1ctx, {     
  data: {
    datasets: [{
      type: 'scatter',
      label: 'Volume',
      data: scatterData, // 替换为合并后的数组
      backgroundColor: 'rgb(255, 99, 132)'
    }],
  },
  // 其他图表配置...
});

如果追求极致性能（实际15000条数据无需纠结），可以改用普通for循环：

const scatterData = [];
const dataLen = count.length;
for (let i = 0; i < dataLen; i++) {
  scatterData.push({
    x: count[i],
    y: volume[i]
  });
}

方案2：后端提前处理（更推荐大数据场景） #

直接在Django视图层将两个数组合并为散点图所需的格式，前端无需额外计算，直接使用即可：

Django视图代码： #

# 假设已获取product_count和product_volume两个列表
scatter_data = [{"x": cnt, "y": vol} for cnt, vol in zip(product_count, product_volume)]
# 将处理好的数据传递给模板
return render(request, "your_template.html", {"scatter_data": scatter_data})

前端模板代码： #

// 直接使用后端处理好的数组，注意加|safe避免转义问题
const scatterData = {{scatter_data|safe}};

const p1ctx = document.getElementById('VolumeChart');
const P1Chart = new Chart(p1ctx, {     
  data: {
    datasets: [{
      type: 'scatter',
      label: 'Volume',
      data: scatterData,
      backgroundColor: 'rgb(255, 99, 132)'
    }],
  },
  // 其他图表配置...
});

内容的提问来源于stack exchange，提问作者adi bahadur