Question

我正在尝试在我的MVC Web应用程序中使用Highcharts。我已经加载了使Highcharts工作的所有先决条件。但显然，“高图”仍未被页面识别。我正在通过谷歌开发者工具检查呈现的页面，它说所有的JQuery和Highchart javascript文件都正确加载。有什么帮助吗？

这是我的.cshtml代码：

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

Answer 1

所以这就是诀窍（这有点奇怪！）：

我需要改变这一行：

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

到这一行：

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

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

未捕获的TypeError：undefined不是函数 - Highcharts - MVC

1 个答案: