Question

我正在尝试jqplot只是用于条形图，但无论我尝试什么样的例子，我都会在控制台中收到此错误：

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

我做了谷歌搜索，但在这方面找不到任何东西，我不明白..任何帮助都会很棒。我正在使用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>

Answer 1

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

未捕获的TypeError：无法设置属性＆＃39; BarRenderer＆＃39;的 undefined（匿名函数）@jqplot.barRenderer.min.js：57（匿名函数）@jqplot.barRenderer.min.js：57

Answer 2

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

中

Answer 3

通过删除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>

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

3 个答案: