Question

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

为了调试这个，我在发布网站后检查了带有inspect元素的页面并遇到了这个错误：

“未定义HighCharts”指向ChartController中的此行， chart = new Highcharts.Chart({。

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

High Charts包在bundle config class中定义如下：

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

在layout.cshtml文件中引用的bundle：

<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文件的位置：

high chart location

这是页面的标记：

@{
    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

1 个答案: