基于Razor视图循环生成Highcharts动态图表遇语法错误求解决

问题背景 #

此前在Stack Exchange上提问过基于Razor视图循环创建Highcharts动态图表的问题，尝试了社区提供的解决方案后，运行时报出语法错误。

现有代码 #

JavaScript 图表创建函数 #

<script>
async function createChart(containerName, dryArgument, operatingArgument){
  let dryData = await fech(dryArgument)
  let operatingData = await fech(operatingArgument)
  Highcharts.chart(containerName, {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Monthly Average Rainfall'
      },
      subtitle: {
          text: 'Source: WorldClimate.com'
      },
      xAxis: {
          categories: [
              'Jan',
              'Feb',
              'Mar',
              'Apr',
              'May',
              'Jun',
              'Jul',
              'Aug',
              'Sep',
              'Oct',
              'Nov',
              'Dec'
          ],
          crosshair: true
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Rainfall (mm)'
          }
      },
      tooltip: {
          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
      },
      plotOptions: {
          column: {
              pointPadding: 0.2,
              borderWidth: 0
          }
      },
      series: [
        {
            name: 'Dry',
            data: JSON.parse(dryData)

        }, {
            name: 'Operating',
            data: JSON.parse(operatingData)

        }]
  });
}
</script>

Razor 视图代码 #

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
            //Dynamic Chart - Starts
             @if (Model.aLstTopsideModuleGroupBy.ToList().Count > 0)
                 {
                     foreach (var item in Model.aLstTopsideModuleGroupBy)
                     {
                      foreach (var item2 in item)
                      {
                          int i = 0;
                     
                            <div id="container@i"></div>
                            <p class="highcharts-description">

                            </p>
                          
                          <script>
                            window.onload = function () {
                                createChart('#container@i',@item2.BaseDry,@item2.BaseOp);
                            };
                        </script>

                        i++;
                      }

                     }
                 }
                 //Dynamic Chart - Ends 
        </div>
    </div>
</div>

报错信息 #

Uncaught SyntaxError: missing ) after argument list，异常截图显示该语法错误。

解决思路与修正方案 #

1. 修复Razor视图的语法错误（报错直接原因） #

调用createChart时，@item2.BaseDry和@item2.BaseOp属于字符串类型（如API路径），未加引号会被JS解析为变量，导致参数列表语法错误。同时，循环内重置计数器i会导致容器ID重复，绑定多次window.onload会覆盖之前的事件：

修正后的Razor代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
            //Dynamic Chart - Starts
             @if (Model.aLstTopsideModuleGroupBy.ToList().Count > 0)
                 {
                     int i = 0; // 将计数器移到外层，避免每次循环重置
                     foreach (var item in Model.aLstTopsideModuleGroupBy)
                     {
                      foreach (var item2 in item)
                      {
                            <div id="container@i"></div>
                            <p class="highcharts-description"></p>
                          
                          <script>
                            // 使用DOMContentLoaded确保DOM加载完成后执行，避免多次覆盖window.onload
                            document.addEventListener('DOMContentLoaded', function() {
                                // 给字符串参数添加单引号
                                createChart('#container@i', '@item2.BaseDry', '@item2.BaseOp');
                            });
                        </script>

                        i++;
                      }

                     }
                 }
                 //Dynamic Chart - Ends 
        </div>
    </div>
</div>

2. 修复JavaScript函数的拼写与数据解析问题 #

• 函数内fech是拼写错误，应改为fetch；
• fetch返回的是Response对象，需先调用.json()或.text()解析数据，避免直接使用JSON.parse：

修正后的JavaScript函数：

<script>
async function createChart(containerName, dryArgument, operatingArgument){
  // 修复fetch拼写错误，并正确解析响应数据
  let dryResponse = await fetch(dryArgument);
  let dryData = await dryResponse.json(); // 若后端返回JSON格式，直接解析
  let operatingResponse = await fetch(operatingArgument);
  let operatingData = await operatingResponse.json();
  
  Highcharts.chart(containerName, {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Monthly Average Rainfall'
      },
      subtitle: {
          text: 'Source: WorldClimate.com'
      },
      xAxis: {
          categories: [
              'Jan',
              'Feb',
              'Mar',
              'Apr',
              'May',
              'Jun',
              'Jul',
              'Aug',
              'Sep',
              'Oct',
              'Nov',
              'Dec'
          ],
          crosshair: true
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Rainfall (mm)'
          }
      },
      tooltip: {
          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
      },
      plotOptions: {
          column: {
              pointPadding: 0.2,
              borderWidth: 0
          }
      },
      series: [
        {
            name: 'Dry',
            data: dryData // 无需再用JSON.parse
        }, {
            name: 'Operating',
            data: operatingData
        }]
  });
}
</script>

3. 额外优化建议 #

• 若后端返回的是纯文本数组字符串（而非JSON），则保留JSON.parse，将数据解析代码改为let dryData = await dryResponse.text().then(text => JSON.parse(text));；
• 可将所有图表初始化逻辑统一放到页面底部的单个脚本中，避免循环内重复生成脚本块，提升代码整洁度。

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