jqPlot图例溢出Div

Question

我使用的是 jqPlot 1.0.0b2_r1012。我尝试绘制饼图并且成功了。但是图例溢出了 div。我在下面解释了我的代码并附上了截图。

我使用以下函数绘制饼图：

function drawjQPlot(div, data) {

        var plot1 = jQuery.jqplot(div, [data],
{
    seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer,
        rendererOptions: {
            showDataLabels: true
        }
    },
    legend: { show: true, location: 's', placement: 'outside',
        rendererOptions: {
            numberColumns: '2'
        }
    }
}

); }

Html structure like this:

<fieldset>
    <legend>Test</legend>
    <table>
        <tr>
            <td>
                <div id="chart1">
                </div>
            </td>
            <td>
                <div id="chart2">
                </div>
            </td>
            <td>
                <div id="chart3">
                </div>
            </td>
        </tr>
    </table>
</fieldset>

截图：

如何解决这个问题？

谢谢。

- Dreamcatcher

Answer 1

如果我理解正确，您希望图例出现在图表容器内部。
请在图例属性中将placement: 'outside'更改为placement: 'insideGrid'。

希望能对您有所帮助。

参考：jqPlot Charts 配置

- Jace

---

选项“outsideGrid”和“insideGrid”的问题在于，如果图例的高度不同，它们会改变图形的高度，这正是问题所在。这解决了溢出问题，但看起来很奇怪。 - esel

Answer 2

我在使用jqPlot版本1.0.8时遇到了同样的问题，使用placement : 'outside'。我想在Bootstrap网格中使用图表，并且可能有非常长的图例会重叠下一行。我无法找到只使用正确参数而不使用其他内容的简洁解决方案。但是，在创建图表后调用以下代码可以为我解决问题。

此代码从包含在HTML表元素中的图表图例中删除，将其放置在包装器div（用于居中）旁边（即在下面）图表的div中：

var chartElement = $("#" + chartElementId);
var legendTable = chartElement.find("table.jqplot-table-legend");
legendTable.css("position", "static"); // removes absolute positioning
legendTable.css("margin", "0 auto"); // centers table inside wrapper div
var legendWrapper = $(document.createElement("div"));
legendTable.appendTo(legendWrapper);
legendWrapper.appendTo(chartElement.parent());

- esel