无法读取未定义的属性'BarRenderer'

i'm trying out jqplot just to use for bar graphs but no matter what example I try, i keep getting this error in the console:

我正在尝试jqplot只是用于条形图,但无论我尝试什么样的例子,我一直在控制台中收到此错误:

"Cannot read property 'BarRenderer' of undefined"

“无法读取未定义的属性'BarRenderer'

i did a google search and can't find much of anything on this and i don't understand.. any help would be great. i'm using asp.net MVC 4

我做了谷歌搜索,找不到任何关于此的东西,我不明白..任何帮助都会很棒。我正在使用asp.net MVC 4

    @{
    ViewBag.Title = "View1";
}

<h2>View1</h2>

<script src="~/Scripts/jqPlot/jquery.min.js"></script>
<script src="~/Scripts/jqPlot/jquery.jqplot.min.js"></script>
<script src="~/Scripts/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
<script src="~/Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="~/Scripts/jqPlot/plugins/jqplot.pointLabels.min.js"></script>
<link href="~/Scripts/jqPlot/jquery.jqplot.css" rel="stylesheet" type="text/css">


<div id="chart1" style="height:400px;width:300px; "></div>

<script>
    $(document).ready(function () {
        var s1 = [200, 600, 700, 1000];
        var s2 = [460, -210, 690, 820];
        var s3 = [-260, -440, 320, 200];
        // Can specify a custom tick Array.
        // Ticks should match up one for each y value (category) in the series.
        var ticks = ['May', 'June', 'July', 'August'];

        var plot1 = $.jqplot('chart1', [s1, s2, s3], {
            // The "seriesDefaults" option is an options object that will
            // be applied to all series in the chart.
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: { fillToZero: true }
            },
            // Custom labels for the series are specified with the "label"
            // option on the series option.  Here a series option object
            // is specified for each series.
            series: [
                { label: 'Hotel' },
                { label: 'Event Regristration' },
                { label: 'Airfare' }
            ],
            // Show the legend and put it outside the grid, but inside the
            // plot container, shrinking the grid to accomodate the legend.
            // A value of "outside" would not shrink the grid and allow
            // the legend to overflow the container.
            legend: {
                show: true,
                placement: 'outsideGrid'
            },
            axes: {
                // Use a category axis on the x axis and use our custom ticks.
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                },
                // Pad the y axis just a little so bars can get close to, but
                // not touch, the grid boundaries.  1.2 is the default padding.
                yaxis: {
                    pad: 1.05,
                    tickOptions: { formatString: '$%d' }
                }
            }
        });
    });
</script>

3 个解决方案

#1

I've recreated the above snippet and it works fine. Are you sure all the files that you are including at the top of your script have been uploaded to your server? The only way I can replicate your error is by not uploading "jquery.jqplot.min.js" to my server.

我重新创建了上面的代码片段并且工作正常。您确定脚本顶部的所有文件都已上传到您的服务器吗?我可以复制错误的唯一方法是不将“jquery.jqplot.min.js”上传到我的服务器。

Uncaught TypeError: Cannot set property 'BarRenderer' of undefined(anonymous function) @ jqplot.barRenderer.min.js:57(anonymous function) @ jqplot.barRenderer.min.js:57

未捕获的TypeError:无法设置未定义的属性'BarRenderer'(匿名函数)@jqplot.barRenderer.min.js:57(匿名函数)@jqplot.barRenderer.min.js:57

#2

I have faced same issue It is mainly related to js loading issue . Put those reference files in master layout page

我遇到过同样的问题它主要与js加载问题有关。将这些参考文件放在主布局页面中

#3

Solved by removing the Scripts.Render at the bottom of View_Layout.cshtml as it was calling jquery twice.

解决方法是删除View_Layout.cshtml底部的Scripts.Render,因为它调用了两次jquery。

    <div class="container body-content">
        @RenderBody()
    </div>

    @Scripts.Render("~/bundles/jquery")        <-- remove this line
    @Scripts.Render("~/bundles/bootstrap")     <-- remove this line
    @RenderSection("scripts", required: false) <-- remove this line

    </body>
  </html>

#1