Question

我正在使用JQPlot，我在一个HTML页面上有很多图表。每个图表都有相同的图例。

我的问题是：是否可以在HTML页面或其自己的div中显示完全位于图表外部的图例？

Answer 1

legend:{ 
                show:true,
                    renderer: $.jqplot.EnhancedLegendRenderer,
                    location: 's' ,
                    placement : "outside",
                    marginTop : "30px",
                    rendererOptions: {
                        numberRows: 1
                    }
                 },

您可以使用展示位置：“外部”，如上面的代码所示。你可以使用marginTop，marginBottom，marginRight，marginLeft属性来移动它。

Answer 2

也许你可以隐藏第二个到最后一个图形的图例，如下所示：

legend: { show:false}

在第一张图中，输入如下内容：

 legend:{
        show:true, 
        placement: 'outside', 
        rendererOptions: {
            numberRows: 1
        }, 
        location:'n'

这样，您只会在图表顶部显示一个图例。

Answer 3

您在寻找title吗？您可以将.jqplot-title设置为不同的样式。默认情况下它出现在图表之外。

$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
  axes:{yaxis:{min:-10, max:240}},
  series:[{color:'#5FAB78'}]
});

你也可以重温传说。请参阅http://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html

上的table.jqplot-table-legend

图形之外的JQPlot图例

3 个答案: