如何从外部JSON获取Highcharts数据并渲染双饼图

嗨，我来帮你搞定这个Highcharts饼图加载JSON数据的问题！首先咱们得先捋清楚最常见的几个坑——JSON结构不匹配、异步加载没处理、字段名不对，然后一步步修正代码，确保chart1和chart2能稳稳渲染到对应的div里。

核心问题分析 #

通常无法生成图表的原因集中在这几点：

• JSON数据结构不符合Highcharts饼图的要求（默认需要包含name和y字段的数组）
• 没有处理AJAX异步加载的特性，数据还没获取到就初始化图表
• JSON文件路径错误，导致请求失败
• 原始JSON的嵌套层级不对，JS里取数据的路径错了

修正后的完整代码示例 #

1. HTML结构（确保两个目标容器存在） #

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts Pie Charts from JSON</title>
    <!-- 引入Highcharts核心库 -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <!-- 引入jQuery用于发起AJAX请求（也可以用原生fetch，jQuery更简洁） -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <!-- chart1的容器 -->
    <div id="chart1" style="width: 450px; height: 350px; margin: 20px;"></div>
    <!-- chart2的容器 -->
    <div id="chart2" style="width: 450px; height: 350px; margin: 20px;"></div>
    
    <script src="chart-script.js"></script>
</body>
</html>

2. JavaScript逻辑（处理异步加载+图表初始化） #

创建chart-script.js文件，代码如下：

$(document).ready(function() {
    // 发起AJAX请求获取外部JSON数据
    $.getJSON('chart-data.json', function(loadedData) {
        // 渲染第一个饼图到chart1容器
        Highcharts.chart('chart1', {
            chart: { type: 'pie' },
            title: { text: '浏览器市场占比' },
            tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %' }
                }
            },
            series: [{
                name: '市场占比',
                colorByPoint: true,
                data: loadedData.chart1 // 直接取用JSON中的chart1数组
            }]
        });

        // 渲染第二个饼图到chart2容器
        Highcharts.chart('chart2', {
            chart: { type: 'pie' },
            title: { text: '操作系统市场占比' },
            tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %' }
                }
            },
            series: [{
                name: '市场占比',
                colorByPoint: true,
                data: loadedData.chart2 // 直接取用JSON中的chart2数组
            }]
        });
    })
    // 处理请求失败的情况，方便排查问题
    .fail(function(jqXHR, textStatus, errorThrown) {
        console.error('JSON数据加载失败:', textStatus, errorThrown);
        alert('无法加载图表数据，请检查JSON文件路径或格式是否正确');
    });
});

3. 正确的JSON数据结构（chart-data.json） #

这个结构是直接对应JS中取用的loadedData.chart1和loadedData.chart2，确保每个图表数据都是包含name（类别名）和y（数值）的对象数组：

{
  "chart1": [
    {"name": "Chrome", "y": 61.41},
    {"name": "Internet Explorer", "y": 11.84},
    {"name": "Firefox", "y": 10.85},
    {"name": "Edge", "y": 4.67},
    {"name": "Safari", "y": 4.18}
  ],
  "chart2": [
    {"name": "Windows", "y": 85.6},
    {"name": "macOS", "y": 9.5},
    {"name": "Linux", "y": 4.9},
    {"name": "iOS", "y": 15.2},
    {"name": "Android", "y": 71.9}
  ]
}

针对特殊JSON结构的适配方案 #

如果你的原始JSON字段名不是name和y（比如用了category和value），或者有额外嵌套层级，只需要在JS里做个简单的数据转换：

// 示例：将原始JSON的category和value字段转换为Highcharts需要的格式
const convertedChart1Data = loadedData.chart1.map(item => ({
    name: item.category,
    y: item.value
}));

// 然后在series.data里用convertedChart1Data代替loadedData.chart1

最后检查要点 #

• 确保三个文件（HTML、JS、JSON）的路径正确，比如都放在同一目录下
• 测试时打开浏览器控制台（F12），看有没有报错信息，方便快速定位问题
• 如果用原生JS替代jQuery，可以用fetch API来获取JSON，逻辑是一样的，只是写法不同

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