Razor 视图中的动态图表呈现

Question

我在C#中进行了数据分组，并尝试将其从Razor视图绑定到高图表，如下所示：

//Dynamic Chart - Starts
 @if (Model.aLstTopsideModuleGroupBy.ToList().Count > 0)
     {
         foreach (var item in Model.aLstTopsideModuleGroupBy)
         {
          foreach (var item2 in item)
          {
              int i = 0;
         <text>
Highcharts.chart('container'@i, {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Demo Chart'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: [
            'Structural Primary',
            'Structural Secondary',
            'Mechanical',
            'Piping',
            'Electrical',
            'Instrument',
            'Telecommunication',
            'Safety',
            'Architectural  ',
            'Other/ Future Load  ',
            'Live Load'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Weight Data'
        }
    },
    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}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0,
            borderWidth: 0
        }
    },
    series: [
        {
            name: 'Dry',
            data: '@item2.BaseDry'

        }, {
            name: 'Operating',
            data: '@item2.BaseOp'

        }]
});
</text>
              i++;
          }

         }
     }
     //Dynamic Chart - Ends 

数据分组如下：

Data 1
1, 2, 3, 4, 5

Data 2
1, 2, 3, 4, 5

以上我需要根据数据集创建两个不同的图表，这就是使用以下内容的原因：

 Highcharts.chart('container'@i, {});

在前端，尝试执行以下操作：

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

                                </p>
                            }
                            i++;
                        }
                    </div>
                </div>
            </div>

在浏览器的检查元素中，得到这个异常：

Uncaught SyntaxError: missing ) after argument list

我试图点击此链接但失败了 - Razor 和 JavaScript

有什么方法可以使图表动态化，使用Razor视图而不是Ajax调用？ 这就是我要实现的：

高排行榜

Answer 1

当使用 razon 和 javascript 时，您需要注意，您无法使用 razor 真正生成 8822996504788 代码。据我所知，如果您使用的是部分视图，则需要在同一视图或父视图中创建 8822996504788 function创建图表并让 razor 调用它以及创建 div 占位符以显示图表，图表上的数据应通过 ajax 调用加载。

下面的代码是一个例子，不应该未经修改就复制粘贴，你需要根据你的要求调整它，这只是为了展示概念。 如果其他人有更优雅的解决方案，请贡献。

async function createChart(containerName, dryArgument, operatingArgument){
    let dryData = await fech(`@Url.Action("GetDryData")/?argument=${dryArgument}`)
  let operatingData = await fech(`@Url.Action("GetOperatingData")/?argument=${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)

        }]
  });
}

请注意，您需要在 controller 中创建两个 ContenResult() 操作来获取数据。

要给他们打电话，您可以使用：

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