已创建柱状图但无法读取JSON数据至HTML/JavaScript中求解决

嘿，我来帮你搞定这个从外部JSON加载数据渲染柱状图的问题！其实方法挺直观的，我给你两种常用的实现方案，你可以根据自己正在用的图表库来选：

如果你用的是Chart.js（这是做柱状图最流行的轻量库之一），可以结合原生的Fetch API来加载JSON数据：

首先在你的HTML里准备画布，并引入Chart.js（可以用本地文件或者CDN）：

<canvas id="myBarChart"></canvas>
<script src="chart.js"></script> <!-- 或者CDN地址 -->

然后写JS代码来加载数据并渲染图表：

// 获取画布上下文
const chartCtx = document.getElementById('myBarChart').getContext('2d');

// 异步加载data.json数据
fetch('data.json')
  .then(response => {
    // 先检查请求是否成功
    if (!response.ok) {
      throw new Error(`加载失败：${response.statusText}`);
    }
    return response.json(); // 把响应解析成JS对象
  })
  .then(rawData => {
    // 从原始数据中提取需要的标签和数据集
    const dateLabels = rawData.map(item => item.date);
    const highValues = rawData.map(item => item.high);
    const mediumValues = rawData.map(item => item.medium);
    const lowValues = rawData.map(item => item.low);

    // 初始化柱状图
    new Chart(chartCtx, {
      type: 'bar',
      data: {
        labels: dateLabels,
        datasets: [
          {
            label: 'High',
            data: highValues,
            backgroundColor: '#ff4d4f'
          },
          {
            label: 'Medium',
            data: mediumValues,
            backgroundColor: '#faad14'
          },
          {
            label: 'Low',
            data: lowValues,
            backgroundColor: '#52c41a'
          }
        ]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true, // Y轴从0开始，避免数据展示失真
            title: {
              display: true,
              text: '数量'
            }
          },
          x: {
            title: {
              display: true,
              text: '日期'
            }
          }
        }
      }
    });
  })
  .catch(error => {
    console.error('加载数据时出错：', error);
  });

如果你的柱状图是用D3.js做的，D3本身就有专门加载JSON的方法，代码示例如下：

先在HTML里准备SVG容器，并引入D3.js：

<svg id="d3BarChart" width="800" height="500"></svg>
<script src="d3.js"></script> <!-- 或者CDN地址 -->

然后编写D3代码：

// 设置图表的边距和尺寸
const margin = {top: 30, right: 30, bottom: 60, left: 60};
const chartWidth = 800 - margin.left - margin.right;
const chartHeight = 500 - margin.top - margin.bottom;

// 创建SVG绘图容器
const svg = d3.select('#d3BarChart')
  .append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

// 加载外部JSON数据
d3.json('data.json').then(rawData => {
  // 确保数值是数字类型（防止JSON里是字符串格式）
  rawData.forEach(item => {
    item.high = +item.high;
    item.medium = +item.medium;
    item.low = +item.low;
  });

  // 定义X轴比例尺（处理日期标签）
  const xScale = d3.scaleBand()
    .domain(rawData.map(item => item.date))
    .range([0, chartWidth])
    .padding(0.2);

  // 定义Y轴比例尺（处理数值范围）
  const maxValue = d3.max(rawData, item => Math.max(item.high, item.medium, item.low));
  const yScale = d3.scaleLinear()
    .domain([0, maxValue])
    .range([chartHeight, 0]);

  // 绘制X轴
  svg.append('g')
    .attr('transform', `translate(0, ${chartHeight})`)
    .call(d3.axisBottom(xScale))
    .selectAll('text')
    .attr('transform', 'rotate(-45)') // 旋转日期标签，避免重叠
    .style('text-anchor', 'end')
    .style('font-size', '12px');

  // 绘制Y轴
  svg.append('g')
    .call(d3.axisLeft(yScale))
    .append('text')
    .attr('transform', 'rotate(-90)')
    .attr('y', -50)
    .attr('x', -chartHeight/2)
    .style('text-anchor', 'middle')
    .text('数量');

  // 绘制High系列的柱子
  svg.selectAll('.high-bar')
    .data(rawData)
    .enter()
    .append('rect')
    .attr('class', 'high-bar')
    .attr('x', item => xScale(item.date))
    .attr('y', item => yScale(item.high))
    .attr('width', xScale.bandwidth()/3)
    .attr('height', item => chartHeight - yScale(item.high))
    .attr('fill', '#ff4d4f');

  // 绘制Medium系列的柱子（偏移位置）
  svg.selectAll('.medium-bar')
    .data(rawData)
    .enter()
    .append('rect')
    .attr('class', 'medium-bar')
    .attr('x', item => xScale(item.date) + xScale.bandwidth()/3)
    .attr('y', item => yScale(item.medium))
    .attr('width', xScale.bandwidth()/3)
    .attr('height', item => chartHeight - yScale(item.medium))
    .attr('fill', '#faad14');

  // 绘制Low系列的柱子（偏移位置）
  svg.selectAll('.low-bar')
    .data(rawData)
    .enter()
    .append('rect')
    .attr('class', 'low-bar')
    .attr('x', item => xScale(item.date) + 2*xScale.bandwidth()/3)
    .attr('y', item => yScale(item.low))
    .attr('width', xScale.bandwidth()/3)
    .attr('height', item => chartHeight - yScale(item.low))
    .attr('fill', '#52c41a');
}).catch(error => {
  console.error('加载数据失败：', error);
});

• 确保data.json的路径正确：如果JSON文件和你的HTML/JS文件在同一目录，直接写文件名即可；如果在子文件夹里，比如data/data.json，要写完整相对路径。
• 本地调试注意跨域问题：如果直接用file://协议打开HTML，部分浏览器会阻止Fetch或D3的请求。这时候建议用本地服务器，比如用Python运行python -m http.server，或者用Node.js的http-server工具启动服务后再访问。
• 检查JSON格式：你的示例里有low: ...，实际要改成具体数值，JSON不允许有省略号，必须是合法的JSON格式（比如"low": 5）。

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