4

获取日志消息:饼图的直径太小,无法渲染。

然后,似乎当我在我得到的页面内悬停或单击时: Uncaught TypeError: Cannot read property '0' of undefined

    <link href="/Content/jqPlot/jquery.jqplot.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery.jqplot.js" type="text/javascript"></script>
    <script src="/Scripts/jqplot.pieRenderer.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            //GetWeeklyProjectSummary();
            Test();
        });

        function Test() {
            var data = [["987 Project",74],["ABC Project",68],["XYZ project",26]];
            var plot1 = jQuery.jqplot('weeklyProjectSummary', [data],
                {
                    seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions: {
                            // Put data labels on the pie slices.
                            // By default, labels show the percentage of the slice.
                            showDataLabels: true
                        }
                    },
                    legend: { show: true, location: 'e' }
                }
              );
        }
    </script>

这是它进入的div:

<div id="weeklyProjectSummary"></div>

这是我在页面上得到的:页面输出

如果您需要更多详细信息,请告诉我。

4

5 回答 5

11

在将 jqplot 与 blueprintcss 一起使用时,我遇到了类似的问题 - 根据您的屏幕截图,我相信您正在使用 blueprintcss。

尝试删除以下行:

legend: { show: true, location: 'e' }

看看它是否正确渲染。

(编辑:这里有更多信息:

https://bitbucket.org/cleonello/jqplot/issue/48/legends-doesnt-look-nice-when-using

于 2011-08-29T13:34:39.320 回答
3

我在我的 CSS 文件中添加了以下行:

.jqplot-table-legend { 宽度:自动;}

从 jqplot css 文件中重载属性。

为我工作。

于 2015-05-12T14:33:53.743 回答
0

包括 canvas.min.js。您可以在下载的示例中找到它。传奇对我有用。

于 2013-03-15T05:01:32.550 回答
0

您的 JQPlot 图表定义似乎正确。馅饼在我的屏幕上正确呈现。

我没有看到 jquery.js 或 jquery.min.js 包括在内。你能确认你的代码中有这个文件的引用吗?

此外,确认您的所有 js/css 文件都被正确引用(您可以使用JSView Firefox 扩展来快速确认它们确实被包含在内)。

于 2011-08-13T15:59:37.750 回答
0

我只想扩展Amaud T的答案:

我遇到了同样的问题,我使用了上面的答案,做了一些小的修改:

<style type="text/css">
    #chartComponentId table.jqplot-table-legend { width: auto !important;}
</style>
<div id="chartComponentId" class="chartComponent">
...
</div>

由于需要使用!important,将此样式表绑定到特定的 div 对象可防止对其他元素产生任何副作用。

于 2016-03-01T10:29:57.560 回答