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>

屏幕截图：

enter image description here

如何解决这个问题？

谢谢。

Answer 1

如果我理解正确，您希望图例显示在图表的容器内更改展示位置：展示位置的“外部”：“内部网格”。

希望有所帮助

参考：jqPlot Charts configuration

Answer 2

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

此代码从图表的div中删除HTML表格元素中包含的图表的图例，并将其放置在图表旁边（即下方）的包装div（用于居中）中＃39 ; s 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());

jqPlot图例溢出div

2 个答案: