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并选择<table class="jqplot-table-legend" ...>元素，你可能会发现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

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

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

谢谢

Answer 4

我发现了类似的东西。尝试检查css属性text-align：left

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

我害怕我不知道为什么但是这些修复了我的错误

jqplot和图例选项问题

4 个答案: