未捕获类型错误：未定义不是一个函数 - Highcharts - MVC

问题描述

我想在我的MVC Web应用程序使用Highcharts。我已经加载的所有的prerequisites使Highcharts工作。但很显然，highchart依然不被认可的网页。我检查由谷歌开发者工具所呈现的页面和它说所有的jQuery和Highchart JavaScript文件正确加载。任何帮助吗？

这是我的.cshtml code：

  @using System.Web.Optimization＆LT; D​​IV ID =容器的风格=最小宽度：310px;高度：400像素;最大宽度：600像素;保证金：0汽车＆GT;＆LT; / DIV＆GT;@section脚本{@ Scripts.Render（〜/包/ jqueryval）
@ Scripts.Render（〜/脚本/ Highcharts-4.0.1 / JS / highcharts.js）
@ Scripts.Render（〜/脚本/ Highcharts-4.0.1 / JS /模块/ exporting.js）
＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{
        VAR图;
        调试器;
        $（文件）。就绪（函数（）{
            调试器;            //生成图表
            $（'＃集装箱'）。highcharts（{
                图：{
                    plotBackgroundColor：空，
                    plotBorderWidth：空，
                    plotShadow：假的
                }，
                标题：{
                    文字：浏览器市场份额在特定的网站，2014年
                }，
                提示：{
                    pointFormat：{} series.name：其中，B＆GT; {point.percentage：.1F}％LT; / B＆GT;'
                }，
                plotOptions：{
                    馅饼：{
                        allowPointSelect：真实，
                        光标：指示器，
                        dataLabels：{
                            启用：真实，
                            格式：'＆LT; B＆GT; {point.name}＆LT; / B＆GT ;: {point.percentage：.1F}％'，
                            风格：{
                                颜色：（Highcharts.theme＆安培;＆安培; Highcharts.theme.contrastTextColor）|| '黑色'
                            }
                        }
                    }
                }，
                系列：[{
                    类型：'馅饼'，
                    名称：浏览器份额，
                    数据：[
                        ['火狐'，45.0]
                        ['IE'，26.8]
                        {
                            名称：'铬'，
                            Y：12.8，
                            切片：真实，
                            选择：真
                        }，
                        ['野生'，8.5]
                        ['歌剧'，6.2]
                        ['其他'，0.7]
                    ]
                }]
            }）;
        }）;
    }）;
 ＆LT; / SCRIPT＆GT;
}
 

解决方案

所以这做的伎俩（这是一种奇怪的！）：

我需要改变这一行：

  $（'＃集装箱'）。highcharts（{
            图：{
                plotBackgroundColor：空，
                plotBorderWidth：空，
                plotShadow：假的
            }，
 

这一行：

 图=新Highcharts.Chart（{
                图：{
                    plotBackgroundColor：空，
                    plotBorderWidth：空，
                    plotShadow：假的，
                    renderTo：容器
                }，
 

这是帮助我通过链接：http://developmentpassion.blogspot.com/2013/09/bar-charts-and-graphs-in-aspnet-mvc.html

I'm trying to use Highcharts in my MVC web application. I have loaded all the prerequisites to make Highcharts working. But apparently, "highchart" is still not recognized by the page. I'm checking the rendered page by google developer tool and it says all the JQuery and Highchart javascript files are loaded properly. Any help?

This is my .cshtml code:

@using System.Web.Optimization

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>



@section Scripts {

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/Scripts/Highcharts-4.0.1/js/highcharts.js")
@Scripts.Render("~/Scripts/Highcharts-4.0.1/js/modules/exporting.js")


<script type="text/javascript">
    $(function() {
        var chart;
        debugger;
        $(document).ready(function() {
            debugger;

            // Build the chart
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Browser market shares at a specific website, 2014'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: [
                        ['Firefox', 45.0],
                        ['IE', 26.8],
                        {
                            name: 'Chrome',
                            y: 12.8,
                            sliced: true,
                            selected: true
                        },
                        ['Safari', 8.5],
                        ['Opera', 6.2],
                        ['Others', 0.7]
                    ]
                }]
            });
        });
    });
 </script>
}

解决方案

So this does the trick (which is kind of weird!) :

I need to change this line:

$('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },

To this line:

chart = new Highcharts.Chart({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    renderTo: 'container'
                },

This is the link which helped me through: http://developmentpassion.blogspot.com/2013/09/bar-charts-and-graphs-in-aspnet-mvc.html

这篇关于未捕获类型错误：未定义不是一个函数 - Highcharts - MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！