Question

获取日志消息：饼的直径太小，无法渲染。

然后，当我在页面内悬停或点击时，我得到：未捕获的TypeError：无法读取未定义的属性“0”

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

以下是我在页面上看到的内容： page output

如果您需要更多详细信息，请与我们联系。

Answer 1

使用jqplot和blueprintcss时遇到了类似的问题 - 基于你的截屏我相信你使用的是blueprintcss。

尝试删除以下行：

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

并查看它是否正确呈现。

（编辑：更多信息：

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

Answer 2

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

.jqplot-table-legend {width：auto; }

从jqplot css文件重载属性。

为我工作。

Answer 3

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

我没有看到包含jquery.js或jquery.min.js。你能确认你的代码中有这个文件的参考吗？

另外，请确认所有js / css文件都已正确引用（您可以使用JSView Firefox Extension快速确认它们确实已包含在内）。

Answer 4

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

Answer 5

我只想扩展Amaud T的答案：

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

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

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

jqplot饼图无法正确呈现。

5 个答案: