如何从Pandas Dataframe导出适配ApexCharts的JSON并实现前端读取？

一、调整Python代码导出正确的JSON格式 #

原代码用orient='table'导出的JSON带有schema元信息，不利于JavaScript解析。我们改成导出数组型JSON，每条记录包含日期和两个余额字段，同时确保日期格式为ISO字符串（Pandas默认会处理）。

修改后的Python代码关键部分：

# 保留原有数据处理逻辑，仅修改导出语句
date_pattern.to_json('plans.json', orient='records', date_format='iso', index=False)

• orient='records'：导出为[{key:value}, ...]的数组结构，方便JS遍历处理
• date_format='iso'：将Date列导出为ISO标准日期字符串（如"2022-12-01T00:00:00.000Z"），ApexCharts可直接识别
• index=False：不导出索引列，减少冗余数据

导出后的JSON示例片段：

[
  {"Date":"2022-12-01T00:00:00.000Z","PlanDayNumber":1,"Plan1BalanceEndOfDay":1015,"Plan2BalanceEndOfDay":1020},
  {"Date":"2022-12-02T00:00:00.000Z","PlanDayNumber":2,"Plan1BalanceEndOfDay":1030,"Plan2BalanceEndOfDay":1040},
  ...
]

二、修改JavaScript代码实现折线图 #

基于你提供的代码1进行修改，实现动态加载JSON数据，设置Date为X轴，两个余额字段为数据系列：

<script>
    var options = {
      chart: {
          height: 350,
          type: 'line',
          zoom: { enabled: false }
      },
      dataLabels: { enabled: false },
      series: [],
      title: { text: '每日余额对比' },
      noData: { text: '加载中...' },
      stroke: { width: [2, 2], curve: 'straight' },
      xaxis: {
          type: 'datetime', // 设置为日期时间类型，自动解析ISO字符串
          labels: {
            rotate: -45,
            format: 'yyyy-MM-dd' // 自定义日期显示格式
          }
      },
      tooltip: {
          x: { format: 'yyyy-MM-dd' },
          y: { formatter: val => `余额: ${val}` }
      },
      grid: { borderColor: '#f1f1f1' }
    }
    
    var chart = new ApexCharts(document.querySelector("#apexcharts-line-chart"), options);
    chart.render();

    var url = 'data/plans.json';
    
    $.getJSON(url, function(response) {
        // 提取X轴日期数据
        const dates = response.map(item => item.Date);
        // 提取两个余额系列的数据
        const plan1Data = response.map(item => item.Plan1BalanceEndOfDay);
        const plan2Data = response.map(item => item.Plan2BalanceEndOfDay);
        
        // 更新图表的X轴分类和数据系列
        chart.updateOptions({
            xaxis: { categories: dates }
        });
        chart.updateSeries([
            { name: 'Plan1 当日余额', data: plan1Data },
            { name: 'Plan2 当日余额', data: plan2Data }
        ]);
    });
</script>

修改说明： #

• X轴配置：将xaxis.type设为datetime，ApexCharts会自动解析ISO日期字符串；通过labels.format自定义日期显示格式
• 数据解析：遍历JSON数组，分别提取日期、Plan1和Plan2的余额数据
• 更新图表：先用updateOptions设置X轴分类，再用updateSeries传入两个数据系列
• 样式优化：调整线条宽度、tooltip显示格式，提升可读性

三、注意事项 #

• 确保plans.json文件路径正确（示例中放在data目录下）
• 页面需引入依赖资源（若未引入）：

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <div id="apexcharts-line-chart"></div>
  

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