图外的 JQPlot 图例

Posted 2023-02-16

【中文标题】图外的 JQPlot 图例

【英文标题】：JQPlot Legend outside of graph

【发布时间】：2013-01-06 07:15:42

【问题描述】：

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

我的问题是：是否可以完全在图形之外显示一个图例，在 HTML 页面上或在它自己的 div 中具有自己的位置？

【参考方案1】：

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

您可以像上面的代码一样使用placement : "outside"。您可以使用 marginTop,marginBottom,marginRight,marginLeft 属性来移动它。

【参考方案2】：

也许你可以隐藏第二张到最后一张图的图例，像这样：

legend:  show:false

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

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

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

【参考方案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']
);

您还可以重新设置图例的样式。见table.jqplot-table-legendhttp://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html