как отобразить несколько графиков на одной странице в 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