DotNet HighChart не заполняется

Я новичок в MVC и впервые попытаюсь использовать DotNet High Chart. Я следую this учебник В Visual Studios MVC 5.DotNet HighChart не заполняется

Мои Связки:

public class BundleConfig 
{ 

    public static void RegisterBundles(BundleCollection bundles) 
    { 
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js")); 

     bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
        "~/Scripts/jquery.validate*")); 


     bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
        "~/Scripts/modernizr-*")); 

     bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        "~/Scripts/bootstrap.js", 
        "~/Scripts/respond.js")); 

     bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/bootstrap.css", 
        "~/Content/site.css")); 

     bundles.Add(new Bundle("~/bundles/highchart").Include(
        "~/Scripts/Highcharts-4.0.1/js/highchart.js")); 
    } 
}

}

My Model:

namespace Charts2.Models 
{ 
public class TransactionCount 
{ 
    public string MonthName { get; set; } 
    public int Count { get; set; } 
} 
}

Мой контроллер:

namespace Charts2.Controllers 
{ 
    public class ChartSampleController : Controller 
{ 
    // GET: ChartSample 
    public ActionResult Index() 
    { 
     //create a collection of data 
     var transactionCounts = new List<TransactionCount>{ 
         new TransactionCount(){ MonthName="January", Count=30}, 
         new TransactionCount(){ MonthName="Febuary", Count=40}, 
         new TransactionCount(){ MonthName="March", Count=4}, 
         new TransactionCount(){ MonthName="April", Count=35}, 
     }; 

     // modify data type to make it of array types 
     var xDataMonths = transactionCounts.Select(i => i.MonthName).ToArray(); 
     var yDataCounts = transactionCounts.Select(i => new object[] { i.Count }).ToArray(); 

     //instanciate an object of the high charts type 
     var chart = new Highcharts("chart") 
       // define the type of chart 
       .InitChart(new Chart { DefaultSeriesType = ChartTypes.Line}) 
       //overall title of the chart 
       .SetTitle(new Title { Text = "Incoming Transactions per hour"}) 
       //small label below the main title 
       .SetSubtitle(new Subtitle { Text = "Accounting"}) 
       // load the x values 
       .SetXAxis(new XAxis {Categories = xDataMonths}) 
       // set the y title 
       .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Number of Transactions"}}) 
        .SetTooltip(new Tooltip{ 
         Enabled = true, 
         Formatter = @"function() { return '<b>'+this.series.name +'</b><br/>'+this.x+': '+this.y;}" 
         }) 
         .SetPlotOptions(new PlotOptions{ 
         Line = new PlotOptionsLine { 
         DataLabels = new PlotOptionsLineDataLabels { 
         Enabled = true 
        }, 
        EnableMouseTracking = false 
         } 
        }) 
        //load y values 
.SetSeries(new [] 
    { 
    new Series {Name = "Hour", Data = new Data(yDataCounts)}, 

}); 


     return View(chart); 
    } 
} 
}

и мое мнение:

@{ 
ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

@model DotNet.Highcharts.Highcharts 

<p> My Chart </p> 
@(Model)

Мой общий _index:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>@ViewBag.Title - My ASP.NET Application</title> 
@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/highchart") 

</head> 
<body> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li>@Html.ActionLink("Home", "Index", "Home")</li> 
       <li>@Html.ActionLink("About", "About", "Home")</li> 
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
      </ul> 
      @Html.Partial("_LoginPartial") 
     </div> 
    </div> 
</div> 
<div class="container body-content"> 
    @RenderBody() 
    <hr /> 
    <footer> 
     <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
    </footer> 
</div> 


@Scripts.Render("~/bundles/bootstrap") 
@RenderSection("scripts", required: false)

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

Uncaught ReferenceError: Highcharts is not defined

Любые советы будут оценены Благодаря

источник

2015-08-13 coto2

Это серверная или клиентская ошибка? –

@MathiasF Его клиентская сторона – coto2

Можете ли вы показать html отображаемого блока сценария в заголовке и конце файла? –

Я понял, где я буду неправильно. Мне не хватает s в конце имени расслоения, я изменил сверток:

bundles.Add(new ScriptBundle("~/bundles/highcharts").Include(
      "~/Scripts/Highcharts-4.0.1/js/highcharts.js" 
       ));

и обновил _index согласно и теперь он работает.

источник

2015-08-13 13:29:06 coto2

Можете ли вы опубликовать весь код вида. Как и в текущем режиме просмотра вы не добавляете высокую диаграмму сверток для просмотра Некоторых вещей, как

@Scripts.Render("~/bundles/highchart")

источник

2015-08-13 11:50:48 Urvi

Я добавил общий _index – coto2

ответ

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