сложенная гистограмма легенда проблема 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 там.

Надеюсь, это поможет. :-)