最近，我在Hight Charts上发表了一篇文章，我想创建基于Razor视图循环的动态图表。
我尝试了一个SO用户提供的解决方案之一，如下所示：

<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>

在前端中，使用了以下内容：

<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：Exception

async function createChart(containerName, dryArgument, operatingArgument){ let dryData = await fetch(dryArgument) /* note you have a typo in your question */ let dryJson = await dryData.json(); let operatingData = await fetch(operatingArgument) let operatingJson = await operatingData.json(); /* rest of code here */

1条答案

按热度按时间

pprl5pva1#

您没有正确设置Java脚本。
首先，fetch()确实返回了一个承诺，一旦实现就会给你一个响应对象。这个响应对象有json()函数返回一个承诺，一旦实现就会把json作为JavaScript对象返回。承诺最好等待。createChart函数的开头应该是这样的：

在HighCharts的series设置中，您现在需要进行以下更改：

series: [
    {
        name: 'Dry',
        data: dryJson
    }, {
        name: 'Operating',
        data: operatingJson

    }]

这确实假设dryJson和operatingJson是一维javascript数组，其中包含数字（因此[1,2,3]将工作，['1', '2', '3']不工作，{items:[{score:1}]}也不工作）。
Razor页面中的确切设置是我留给您的一项任务，验证呈现页面的结果是否与实际需要相匹配应该不难。
出于测试的目的，我创建了一个堆栈片段，其中我使用来自Stack API的帖子和用户作为Json源代码。由于它们的形状略有不同，您可以看到一个Map到其items数组以获得所需的数字数组：
一个二个一个一个

赞(0）回复(0）举报 2023-02-06

asp.net 参数列表jQuery后缺少)

1条答案

相关问题

热门标签

最新问答