HighCharts chart asp.net mvc rendering

Привет, Я пытаюсь использовать DotNet HighCharts, чтобы создать простую диаграмму, чтобы отображать данные о продажах моего билета на моем сайте C# asp.net MVC. Я хочу создать диаграмму столбца/столбца, в которой будет показано, сколько билетов было доступно для всего мероприятия и сколько осталось. Я планировал передать диаграмму в представление и отобразить его. Однако моя диаграмма не отображается в моем представлении, и я не могу найти причину, по которой она не будет отображаться, любая помощь будет принята с благодарностью!HighCharts chart asp.net mvc rendering

Это мой метод контроллера

[Authorize(Roles = "canEdit")] 
public ActionResult Details(int? id) 
{ 
    if (id == null) 
    { 
     return new HttpStatusCodeResult(HttpStatusCode.BadRequest) 
    } 

    Event events = db.Events.Find(id); 

    if (events == null) 
     { 
     return HttpNotFound(); 
     } 
     Highcharts chart = new Highcharts("chart") 
    .SetCredits(new Credits { Enabled = false }) 
    .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column }) 
    .SetTitle(new Title { Text = "Ticket Sales" }) 
    .SetXAxis(new XAxis { Categories = new[] { "Total Tickets", "Tickets Remaining"} }) 
    .SetYAxis(new YAxis 
    { 
    Min = 0, 
    Title = new YAxisTitle { Text = "Quantity" } 
    }) 
    .SetTooltip(new Tooltip { Formatter = "function() { return ''+ this.series.name +': '+ this.y +''; }" }) 
    .SetPlotOptions(new PlotOptions { Bar = new PlotOptionsBar { Stacking = Stackings.Normal } }) 
    .SetSeries(new[] 
      { 
       new Series { Name = "Total", Data = new Data(new object[] { events.TicketsAvailable, events.TicketsRemaining }) } 
      }); 


     return View(chart); 
    }

И это мой взгляд

@model DotNet.Highcharts.Highcharts 
@{ 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<head> 
<script src="~/Scripts/jquery-2.1.3.min.js"></script> 
<script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script> 
<title>Event Title</title> 
</head> 
<body> 

<p>Chart Displaying Ticket Sales </p> 
<div>@(Model)</div> 


<div> 
    @Html.ActionLink("Back to List", "Index", "EventsAdmin") 
</div> 
</body>

источник

2016-03-13 CatherineG

Запустите консоль (инструменты разработчика) и проверьте, не появляются ли какие-либо ошибки. –

Я думаю, что проблема в том, что ваши JS файлы не загружаются.

<script src="~/Scripts/jquery-2.1.3.min.js"></script> 
<script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>

Я пробовал следующий код, и это сработало для меня. Вы можете изменить код в соответствии с вашими требованиями.

Вид:

@model DotNet.Highcharts.Highcharts 
@{ 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<script src="http://code.highcharts.com/stock/highstock.js"></script> 
<script src="https://code.jquery.com/jquery-1.12.1.min.js" integrity="sha256-I1nTg78tSrZev3kjvfdM5A5Ak/blglGzlaZANLPDl3I=" crossorigin="anonymous"></script> 
<head> 
    <title>Event Title</title> 
</head> 
<body> 
    <p>Chart Displaying Ticket Sales </p> 
    <div>@(Model)</div> 
</body>

Контроллер:

public ActionResult Index() 
     { 
      object[] desktops = new object[] {17368, 17792, 18235, 18136 }; 
      var monthsList = new[] { "Feb-15", "Mar-15", "Apr-15", "May-15",}; 

      Highcharts chart = new Highcharts("chart") 
     .SetCredits(new Credits { Enabled = false }) 
     .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column , Height = 190, Width=190}) 
     .SetTitle(new Title { Text = "Ticket Sales" }) 
     .SetXAxis(new XAxis { Categories = monthsList, Labels = new XAxisLabels() { } }) 
     .SetYAxis(new YAxis 
     { 
      Min = 0, 
      Title = new YAxisTitle { Text = "Quantity" } 
     }) 
     .SetTooltip(new Tooltip { Formatter = "function() { return ''+ this.series.name +': '+ this.y +''; }" }) 
     .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn{ Color = System.Drawing.Color.Black } }) 
     .SetSeries(new[] 
       { 
       new Series { Name = "Total", Data = new Data(desktops) } 
        }); 

      return View(chart); 
     }

Если вы по-прежнему сталкиваются с проблемами, загляните в консоль отладки вашего браузера, если есть какие-либо вопросы JavaScript.

источник

2016-03-13 18:51:29

Вы были правы, мои сценарии HighCharts не загружались должным образом – CatherineG

HighCharts chart asp.net mvc rendering

ответ

Смежные вопросы