HighCharts图表asp.net mvc渲染答案

【问题标题】：HighCharts chart asp.net mvc renderingHighCharts图表asp.net mvc渲染
【发布时间】：2016-03-13 15:37:29
【问题描述】：

您好，我正在尝试使用 DotNet HighCharts 创建一个简单的图表，以在我的 C# asp.net MVC 站点中显示我的门票销售数据。我希望创建一个条形图/柱形图，显示该活动总共有多少张门票以及剩余多少张。我计划将图表传递给视图并显示它。但是我的图表没有呈现在我的视图中，我找不到它不显示的原因，任何帮助将不胜感激！

这是我的控制器方法

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

【问题讨论】：

请运行控制台（开发者工具）并检查是否出现错误。

标签： c# asp.net-mvc charts highcharts

【解决方案1】：

我认为问题在于您的 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 问题）。

【讨论】：

你说得对，我的 HighCharts 脚本没有正确加载