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>占位符的viewmodel属性，如下例所示：

模型

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中的同一页上显示多个图表

1 个答案: