如何使用JavaScript而非jQuery实现Highcharts系列动态变更

嘿，我懂你现在的困扰——之前在Stack Overflow找了一圈没找到满意的方案，想要不用jQuery，纯靠JavaScript实现从JSON文件动态生成Highcharts的Series，而不是提前在代码里定义空变量对吧？这事儿其实不难，我给你捋个靠谱的实现思路和代码：

核心逻辑 #

完全不需要提前定义空的Series变量，我们只需要：

• 用原生JS的fetch API读取JSON数据（替代jQuery的$.getJSON）
• 确保JSON数据结构和Highcharts的Series格式匹配（或者做简单的格式转换）
• 把处理好的数据直接传给Highcharts的配置项，或者后续动态添加到已有的图表中

示例代码 #

第一步：准备你的JSON数据文件 #

假设你的chart-data.json内容是这样的（每个对象对应一个Series，包含name和data）：

[
  {
    "name": "网站访问量",
    "data": [1200, 1500, 1800, 2200, 2500]
  },
  {
    "name": "注册用户数",
    "data": [300, 450, 600, 800, 1000]
  }
]

第二步：纯JS实现图表初始化与动态Series生成 #

// 先定义图表的基础配置，Series先留空
const baseChartConfig = {
  chart: {
    renderTo: 'your-chart-container' // 替换成你页面中图表容器的ID
  },
  title: {
    text: '动态生成Series演示'
  },
  xAxis: {
    categories: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    title: {
      text: '数值'
    }
  },
  series: [] // 这里不需要提前定义空变量，后续动态填充
};

// 用原生fetch读取JSON文件并生成Series
fetch('chart-data.json')
  .then(response => {
    if (!response.ok) throw new Error('JSON文件加载失败');
    return response.json();
  })
  .then(seriesData => {
    // 直接把JSON数据赋值给配置项的series
    baseChartConfig.series = seriesData;
    // 初始化Highcharts图表
    const chart = new Highcharts.Chart(baseChartConfig);
  })
  .catch(error => {
    console.error('出错啦:', error);
  });

第三步：如果需要后续动态添加Series（比如用户操作后加载新数据） #

如果你已经有了一个初始化好的图表实例，想要动态追加新的Series，可以这么写：

// 假设chart是已经初始化好的图表实例
fetch('new-series-data.json')
  .then(response => response.json())
  .then(newSeries => {
    // 逐个添加新的Series到图表中
    newSeries.forEach(series => {
      chart.addSeries(series);
    });
  })
  .catch(error => {
    console.error('加载新Series失败:', error);
  });

特殊情况处理：如果JSON结构不匹配Highcharts要求 #

要是你的JSON数据结构和Highcharts的Series格式不一样，只需要在读取后做个简单的映射转换就行，比如：

// 假设你的JSON结构是{"dataList": [{"seriesName": "...", "values": [...]}]}
fetch('custom-format.json')
  .then(response => response.json())
  .then(rawData => {
    // 转换为Highcharts需要的Series格式
    const formattedSeries = rawData.dataList.map(item => ({
      name: item.seriesName,
      data: item.values
    }));
    baseChartConfig.series = formattedSeries;
    const chart = new Highcharts.Chart(baseChartConfig);
  })

这样就完全实现了从JSON动态生成Series，全程没有用到jQuery，也不需要提前定义空的Series变量~

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