使用 High Chart 的参考错误 API。 MVC 3

Question

根据本教程 high charts mvc 进行设置后，我正在使用 High Chart 的 API 在我的 DetailsPage 上创建折线图。问题是当我从 Visual Studio 发布网站时，图表没有显示。

为了调试这个，我在网站发布后用检查元素检查了页面，发现了这个错误：

"HighCharts is not defined" 指向 ChartController 中的这一行， chart = new Highcharts.Chart({.

有谁知道如何解决这个引用错误？或者我该如何调试问题，因为我似乎已经遵循了所有相关步骤。

High Charts 包在包配置中这样定义 class:

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

layout.cshtml 文件中引用的包：

<head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - Gesture Physio - Control Panel</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/highcharts")

这是项目树中 js 文件的位置：

这是页面的标记：

@{
    ViewBag.Title = "DetailsPage";
}

<h2>Progress Details Chart</h2>

@model DotNet.Highcharts.Highcharts

<p>Max Range Readings</p>
@(Model)

页面控制器：

using DotNet.Highcharts;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Options;
using GesturePhysioWebClient.DAL;
using GesturePhysioWebClient.Models;
using Microsoft.WindowsAzure.MobileServices;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;

namespace GesturePhysioWebClient.Controllers
{
    public class ChartController : Controller
    {

        //Restrict access to non-logged in users
        [Authorize]
        public async Task<ActionResult> DetailsPage()
        {

            var mobileClient = new MobileServiceClient("https://progressreportdb.azure-mobile.net/",
               "************************"
           );
            var itemModelTable = mobileClient.GetTable<Item>();

            var result = await itemModelTable
                /*.OrderByDescending(Item => Item.Id)
                .Take(40)*/
                .ToListAsync();

            ViewBag.Message = "Patient Progress Details.";

            var yDataMaxRange = result.Select(item => Double.Parse(item.Max_Range ?? "0")).ToArray();
            var xDataDates = result.Select(item => DateTime.Parse(item.Date, System.Globalization.CultureInfo.InvariantCulture).ToShortDateString()).ToArray();
            //cast the y values to an object array:
            object[] yDataAsObjectArray = yDataMaxRange.Cast<object>().ToArray();


            var chart = new Highcharts("chart").
                InitChart(new Chart { DefaultSeriesType = ChartTypes.Line })
                .SetTitle(new Title { Text = "User Max Range Readings" })
                .SetSubtitle(new Subtitle { Text = "ROM Progress" })
                .SetXAxis(new XAxis { Categories = xDataDates })
                .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Max Range Readings" } })
                .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
                    }
                })
              .SetSeries(new[]
            {
                 new Series {Name = "Max ROM", Data = new Data(yDataAsObjectArray) }
                 //new Series { Name = "Total", Data = new Data(new object[] { 441, 441, 22, 30, 610 }) }

            });


            return View(chart);


        }


    }
}

Answer 1

您需要将捆绑包添加到您的布局文件中。相关代码如下：

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

您可以将其添加到布局文件中的 head 标记中。还要确保在文章中提到的 highcharts 包之前添加 jquery 包。

在您的 BundleConfig 中，将您的 highcharts 包替换为不使用 IncludeDirectory，如下所示

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

使用 High Chart 的参考错误 API。 MVC 3

Reference error using High Chart's API. MVC 3

c#

jquery

asp.net-mvc-3

highcharts