javascript - 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结构：

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

截屏：

如何解决这个问题？

谢谢你。

Answer 1

如果我理解正确，您希望图例出现在图表的容器内。
在您的图例属性中将位置：“外部”更改为位置：“内部网格”。

希望有帮助

参考：jqPlot 图表配置

Answer 2

jqPlot 版本 1.0.8 使用placement : 'outside'. 我想在引导网格中使用这些图，并且可能有很长的图例与下一行重叠。我找不到一个只使用正确参数而不使用其他任何东西的干净解决方案。但是在创建情节后调用的以下代码为我解决了这个问题。

此代码从图表的 div 中删除包含在 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());