jqplot和图例选项问题

Question

我的代码中有以下内容。拥有该选项

 legend: {show:true}  

会严重扰乱图表。图例部分好长 并且没有图表。 我已将图表的外观图像粘贴到此处： http://tinypic.com/view.php?pic=2eqgbgy&s=7

虽然没有图例选项，它显示得很好，但图表当然没有图例。

在 Chrome 中我看到以下异常 未捕获的错误：INDEX_SIZE_ERR：DOM 异常 1

<script type="text/javascript"> 
        line2 = [['Living Expenses',1000], ['Loans',2000], ['Credit 
Card',500]]; 
    $j(document).ready(function() { 
        $j.jqplot.config.enablePlugins = true; 
        $j.jqplot('piechartdiv', [line2], { 
            title: 'Where is my money going?', 
            seriesDefaults:{renderer:$j.jqplot.PieRenderer, 
rendererOptions:{sliceMargin:8}}, legend:{show:true} 
        }); 
}); 

</script> 

<div style="width: 450px;margin: 0px auto;"> 
    <div id='piechartdiv'></div> 
</div> 

感谢任何帮助。

Answer 1

您是否使用 Bootstrap 或其他 CSS 重置库？

如果您进入 firebug，并选择 元素，您可能会看到有一个 width:100 % 默认属性设置table 元素。您可以在 CSS 布局中修复它：

#piechartdiv table.jqplot-table-legend {
    width:auto;
}

Answer 2

对我来说唯一奇怪的是：

$j.jqplot

为什么你的代码上有一些J？除此之外，一切似乎都很好，也许尝试在图例上放置一个位置，看看是否解决这个问题，这是一个例子：

plot = $.jqplot('chart2', [arr], {
        grid: {
            drawBorder: true,
            drawGridlines: false,
            background: '#FFFFFF',
            shadow: true
        },
        seriesDefaults: {
            renderer: $.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true
            }
        },
        legend: {
            show: true,
            location: 'e'
        }
    });

Answer 3

我遇到过类似的事情。
尝试检查 css 属性 text-align:left

<div id='piechartdiv' style="text-align:left;"></div> 

恐怕我不知道为什么，但这些为我修复了错误

Answer 4

您是否在代码中包含了 jqplot.css 文件？

确保它包含在代码中，并且该文件也存在于您引用的目录中。

谢谢