使用Django Chartit加载数量未知的图表

这个问题我之前也碰到过，手动写参数列表真的太繁琐了，尤其是图表数量不固定的时候，完全没法维护。给你几个实用的解决方案，你可以根据自己的技术栈和实际场景来选：

1. 纯前端JavaScript动态生成（最通用方案） #

如果你的datachart是一个包含所有图表数据的对象或数组，直接用JS遍历它，动态创建<div>并加载每个图表就行，完全不需要手动写参数：

// 假设你的datachart结构是这样的：{ p1: 图表1数据, p2: 图表2数据, ... }
// 先找个容器来放所有图表div
const chartsContainer = document.getElementById('charts-wrapper');

// 遍历datachart的所有键值对
Object.entries(datachart).forEach(([chartKey, chartData]) => {
  // 创建独立的div元素
  const chartDiv = document.createElement('div');
  // 给每个div加唯一ID和样式类，方便后续操作或美化
  chartDiv.id = `chart-${chartKey}`;
  chartDiv.classList.add('chart-item');
  
  // 把div加到容器里
  chartsContainer.appendChild(chartDiv);
  
  // 调用你的loadchart方法，传入当前图表的数据和对应的div
  // 这里根据你的loadchart实际调用方式调整，比如如果它需要指定目标元素：
  loadchart(chartData, chartDiv);
  // 如果你的loadchart是依赖某个特定格式的参数，也可以根据chartKey动态生成
});

这种方式完全适配任意数量的图表，不管是1个还是100个，都能自动处理。

2. 模板引擎内迭代（如果用模板渲染页面） #

如果你的chart.html是用模板引擎（比如Handlebars、EJS、Jinja2等）渲染的，直接在模板里迭代datachart就行，不需要手动拼接参数：

比如Handlebars的示例： #

<div id="charts-wrapper">
  {{#each datachart}}
    <!-- 每个图表对应一个独立div，这里的@key就是datachart里的p1、p2... -->
    <div class="chart-item" id="chart-{{@key}}">
      {{!-- 调用你的loadchart过滤器，动态传入当前图表的数据和key --}}
      {{this | loadchart:@key}}
    </div>
  {{/each}}
</div>

EJS的示例： #

<div id="charts-wrapper">
  <% Object.keys(datachart).forEach(chartKey => { %>
    <div class="chart-item" id="chart-<%= chartKey %>">
      <%= loadchart(datachart[chartKey], chartKey) %>
    </div>
  <% }) %>
</div>

模板引擎会自动帮你遍历所有图表数据，生成对应数量的<div>，完全不用管数量多少。

3. 动态构建参数字符串（适配原有loadchart调用方式） #

如果你的loadchart必须接收类似p1,p2,...这样的参数列表，那可以先动态生成这个字符串，再传入过滤器：

// 从datachart中提取所有键，拼成逗号分隔的字符串
const chartKeys = Object.keys(datachart).join(',');
// 然后把这个字符串传到模板里，或者直接调用方法
// 比如模板里可以这样用：{{datachart|loadchart:chartKeys}}

这种方式可以不用修改原有loadchart的逻辑，只是动态生成它需要的参数列表。

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