从textarea获取配置生成Highcharts图表失败问题求助

问题原因 #

从textarea获取的配置内容是字符串类型，而Highcharts.chart()的第二个参数要求传入合法的JavaScript对象，直接传字符串会导致方法无法解析配置。另外原代码还存在两个细节问题：

• 用textContent获取textarea内容不如value属性准确，后者专门用于获取表单元素的输入值
• 配置里的exporting对象末尾有多余的尾逗号，不符合JSON语法规范

解决方案 #

1. 改用value属性获取textarea的输入内容
2. 将字符串格式的配置转换为JavaScript对象：推荐使用标准JSON格式配合JSON.parse()（需确保配置键名用双引号、无尾逗号）；若要支持JS对象语法（键名无引号），可使用eval()（仅在可信环境下使用）
3. 每次生成图表前销毁已存在的图表，避免重复渲染冲突

修改后的完整代码 #

HTML部分 #

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<button onclick="build()">生成图表</button>
<div id="container"></div>
<textarea id="chartCode" cols="30" rows="15">
{
  "series": [{
    "data": [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }],    
  "exporting": {
    "sourceWidth": 900,
    "sourceHeight": 400
  }
}
</textarea>

JavaScript部分 #

let currentChart = null;

function build() {
  // 获取textarea输入内容并去除首尾空白
  const configStr = document.getElementById('chartCode').value.trim();
  
  try {
    // 将JSON字符串转换为JS对象
    const config = JSON.parse(configStr);
    
    // 销毁已存在的图表
    if (currentChart) {
      currentChart.destroy();
    }
    
    // 生成新图表
    currentChart = Highcharts.chart('container', config);
  } catch (error) {
    alert('配置格式错误：' + error.message);
    console.error(error);
  }
}

补充说明 #

• 若需支持不带双引号的JS对象语法，可将JSON.parse(configStr)替换为eval('(' + configStr + ')')，但该方式存在安全风险，仅适合自用场景
• 配置内容需注意语法规范，避免尾逗号、未闭合括号等错误，否则转换时会抛出异常

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