堆积的条形图图例问题jqplot

debugcn 发表于 Dev

活力

我遇到了jqplot堆叠条形图图例的问题，我想以自己的自定义方式放置图例。但是我所做的任何更改都不会生效。

我想要的是这个

在此处输入图片说明

但是我在传说中得到的是如下

在此处输入图片说明

我正在使用的代码段

var s1 = [2, 6, 7, 10];
  var s2 = [7, 5, 3, 4];
  var s3 = [14, 9, 3, 8];
  var s4 = [14, 9, 3, 8];
  plot3 = $.jqplot('graph_stacked', [s1, s2, s3,s4], {
    // Tell the plot to stack the bars.
    stackSeries: true,
    captureRightClick: true,
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
          // Put a 30 pixel margin between bars.
          barMargin: 35,
          // Highlight bars when mouse button pressed.
          // Disables default highlighting on mouse over.
          highlightMouseDown: true  
      },
      pointLabels: {show: true}
    },
    axes: {
      xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer
      },
      yaxis: {
        // Don't pad out the bottom of the data range.  By default,
        // axes scaled as if data extended 10% above and below the
        // actual range to prevent data points right on grid boundaries.
        // Don't want to do that here.
        padMin: 0
      }
    },


    legend:{
            show:true, 
            placement:'outside',
            rendererOptions: {
                numberRows: 2,
                numberColumns: 2

            }, 
            location:'s',
            marginTop: '1px',
            border:'none'

        }          
  });

艾尼斯·奈尔（Anish Nair）

您尚未为图例设置渲染器。设定renderer为$.jqplot.EnhancedLegendRenderer

因此，图例对象将如下所示：

legend:{
    renderer: $.jqplot.EnhancedLegendRenderer,
    show:true, 
    placement:'outside',
    rendererOptions: {
        numberRows: 2,
        numberColumns: 2
    }, 
    location:'s',
    marginTop: '40px',
    border:'none'
}

IMP：还请确保您已将jqplot.enhancedLegendRenderer.min.js和jquery.jqplot.min.css文件分别包含在script和链接标记中。

您可以在此处查看正在工作的小提琴：带有图例的堆积条形图

访问以上链接后，您想检查左窗格的“外部资源”部分。您可以在其中检查随附的JS和CSS文件。

希望能帮助到你。:-)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。