mvc5如何在同一个页面显示多个图表

Question

使用

  using DotNet.Highcharts;

控制器代码

 //First Part
 Highcharts columnChart = new Highcharts("columnchart");
       ************************
   columnChart.SetPlotOptions(new PlotOptions
   {
       Column =  new PlotOptionsColumn
           {
          DataLabels = new PlotOptionsColumnDataLabels { Enabled = true,
          Crop = true, Overflow = "none",
          Rotation= -50, Padding=200,X=5,Y=-10  }  }
   });
      columnChart.SetXAxis(new XAxis()
        {
            Type = AxisTypes.Category,
            Title = new XAxisTitle() { Text = "Years", Style = "fontWeight: 'bold', fontSize: '17px'" },
            Categories = tcMX.ToArray()
        });
        columnChart.SetSeries(tcMASt.ToArray());
       **********************
  ViewData["chartYear"]=columnChart;

 //Second Part
  Highcharts columnChartState = new Highcharts("columnchart");
   ************************
       other code same like above
       **********************
   ViewData["chartState"]=columnChartState;

cshtml 页面

  @(ViewData["chartYear"])    
  <br/> <br/>
  @(ViewData["chartState"])

根据上面的代码，我必须同时显示 年明智图表 和 州明智图表 但只显示第二个图表。如果我在单独的页面上尝试那么它工作正常但是当在同一页面上尝试时只显示最后一个图表。

如何解决？

Answer 1

可能您在 Highcharts 初始化构造函数中为两个图表分配了相同的名称，第二个图表在渲染内部视图期间覆盖了第一个图表，如下面的代码所示：

Highcharts columnChart = new Highcharts("columnchart");

Highcharts columnChartState = new Highcharts("columnchart");

相反，尝试为第二个图表使用不同的名称（图表名称应该是唯一的以避免覆盖问题）：

Highcharts columnChartState = new Highcharts("columnchartstate");

我还建议删除 ViewData 用法并将图表作为具有不同 <div> 占位符的视图模型属性，如下例所示：

型号

public class ChartsViewModel
{
    public Highcharts ColumnChart { get; set; }

    public Highcharts ColumnChartState { get; set; }
}

控制器操作

public ActionResult ActionName()
{
    Highcharts columnChart = new Highcharts("columnchart");
    Highcharts columnChartState = new Highcharts("columnchartstate");

    // other stuff

    var charts = new ChartsViewModel
    {
        ColumnChart = columnChart,
        ColumnChartState = columnChartState
    };

    return View(charts);
}

查看

@model ChartsViewModel

<div>@Model.ColumnChart</div>
<br /><br />
<div>@Model.ColumnChartState</div>

参考：DotNet.Highcharts Class

mvc5如何在同一个页面显示多个图表

how to display multiple chart on same page in mvc5

asp.net-mvc

highcharts

asp.net-mvc-5