堆积条形图传奇问题jqplot

Question

我遇到了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'

        }          
  });

Answer 1

您尚未为图例设置渲染器。 将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和链接标记中。

您可以在此处查看工作小提琴：Stacked Bar Chart with Legends

您希望在访问上述链接后查看左窗格中的外部资源部分。您可以在那里检查包含的JS和CSS文件。

希望它有所帮助。 ： - ）