如何读取JSON文件数据生成以Dates为图例的用户观看量图表

你现有JSON结构完全可以直接用来生成符合要求的统计图表，不需要额外调整数据结构，核心处理逻辑如下：

• 提取公共X轴维度：取JSON根节点的Dates数组作为图表的X轴刻度值，对应各统计时间点
• 拆分数据集：遍历根节点的Viewers数组，每个数组元素对应一个独立的数据系列：元素的Name字段作为系列名展示在图例中，元素内的Viewers数组就是该用户在对应时间点的观看人数统计值，和Dates数组的下标一一对应。如果不需要展示Total汇总项，遍历的时候直接过滤掉Name为Total的项即可。

代码示例（以JS端常用的折线图实现为例） #

// 此处替换为你读取到的JSON数据对象
const rawData = {
    "Avg": 49,
    "Max": 70,
    "Dates": ["01/01/2019 01:05", "01/01/2019 01:10", "01/01/2019 01:15", "01/01/2019 01:20", "01/01/2019 01:25", "01/01/2019 01:30", "01/01/2019 01:35"],
    "Viewers": [
        {"Name": "User1", "Viewers": [1,2,3,4,5,6,7]},
        {"Name": "User2", "Viewers": [2,3,4,5,6,7,8]},
        {"Name": "User3", "Viewers": [3,4,5,6,7,8,9]},
        {"Name": "User4", "Viewers": [4,5,6,7,8,9,10]},
        {"Name": "user5", "Viewers": [5,6,7,8,9,10,11]},
        {"Name": "User6", "Viewers": [6,7,8,9,10,11,12]},
        {"Name": "User7", "Viewers": [7,8,9,10,11,12,13]},
        {"Name": "Total", "Viewers": [28, 35, 42, 49, 56, 63, 70]}
    ]
};

// 数据转换
const xAxisData = rawData.Dates;
const chartDatasets = rawData.Viewers
  // 不需要展示Total汇总线就取消下一行的注释
  // .filter(item => item.Name !== 'Total')
  .map(user => ({
    label: user.Name,
    data: user.Viewers
  }));

// 传入图表实例即可完成渲染
const chartOption = {
  type: 'line',
  data: {
    labels: xAxisData,
    datasets: chartDatasets
  },
  options: {
    scales: {
      x: { title: { display: true, text: '统计时间' } },
      y: { title: { display: true, text: '观看人数' } }
    }
  }
}

上述数据转换逻辑是通用的，不管你用Python的Matplotlib、Plotly，还是前端的ECharts等其他图表库，都只需要按这个规则拆分数据即可直接生成图表，不需要改动原始JSON的结构。

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