在Highcharts中使用JSON数据替代csvURL实现折线图的技术问询

没问题！我帮你一步步搞定这个需求——用RestAPI返回的JSON数据来做和目标示例类似的HighCharts线图，咱们分步骤来：

因为HighCharts的折线图对数据格式有明确要求，咱们把JSON改成按系列分组的结构（这是最适配HighCharts的格式），示例如下：

[
  {
    "name": "东京",
    "data": [[1620000000000, 7.0], [1622678400000, 6.9], [1625356800000, 9.5]]
  },
  {
    "name": "纽约",
    "data": [[1620000000000, -0.2], [1622678400000, 0.8], [1625356800000, 5.7]]
  }
]

• 每个数组元素对应一个折线系列，name是系列名称，data里的子数组是[时间戳, 数值]，时间戳方便HighCharts自动解析为日期轴。

如果你的原始JSON格式不是这样（比如是按日期聚合的多字段结构），后面会给你数据转换的代码示例。

这里用原生fetch API来请求RestAPI，然后直接把数据传入HighCharts配置：

HTML部分 #

<div id="container" style="width:100%; height:400px;"></div>

JavaScript部分 #

// 请求你的RestAPI接口
fetch('你的RestAPI地址')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(chartData => {
    // 初始化HighCharts图表
    Highcharts.chart('container', {
      title: {
        text: '月度平均气温'
      },
      xAxis: {
        type: 'datetime', // 告诉HighCharts x轴是时间类型
        title: {
          text: '日期'
        }
      },
      yAxis: {
        title: {
          text: '气温 (°C)'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d}: {point.y:.2f} °C' // 自定义日期显示格式
      },
      series: chartData // 直接把接口返回的JSON作为系列数据
    });
  })
  .catch(error => {
    console.error('数据加载出错:', error);
  });

如果你的RestAPI返回的是按日期聚合的多字段结构（比如下面这种）：

[
  {"date": "2021-05", "东京":7.0, "纽约":-0.2},
  {"date": "2021-06", "东京":6.9, "纽约":0.8},
  {"date": "2021-07", "东京":9.5, "纽约":5.7}
]

那可以先把数据转换成HighCharts需要的格式，修改后的JavaScript代码如下：

fetch('你的RestAPI地址')
  .then(response => response.json())
  .then(rawData => {
    // 转换数据格式
    const transformedData = [
      {
        name: '东京',
        data: rawData.map(item => [new Date(item.date).getTime(), item.东京])
      },
      {
        name: '纽约',
        data: rawData.map(item => [new Date(item.date).getTime(), item.纽约])
      }
    ];

    // 渲染图表（和之前的配置一致）
    Highcharts.chart('container', {
      // ... 省略其他配置项，和上面的示例一致
      series: transformedData
    });
  })

• 确保你的RestAPI支持跨域访问，如果是本地开发环境遇到CORS问题，可以配置前端代理（比如Vue/React的代理配置）或者让后端添加跨域头。
• 也可以用axios替代fetch，用法类似，只需要把fetch请求换成axios.get('API地址').then(res => res.data)。

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