jqplot bar и линейный график, где линейный график находится за

Question

Когда я делаю линейный график, линия по умолчанию по умолчанию. У меня есть заполненный линейный график, и я хочу, чтобы он находился за моей гистограммой. Есть ли способ сделать это?

Ниже приведен мой код, он выглядит длинным, но большая часть его - это дополнительные опции. Существует гистограмма месячных значений энергии, а линейный график (y2axis) является совокупной энергией.

<script type="text/javascript"> 
$(document).ready(function() { 
var rendered = false; 
    $("#@uniqueId")[0].RenderGraph = function RenderGraph() { 
     if(!rendered) 
     { 
      rendered = true; 
      var energyValues = @(serializer.Serialize(Model.YAxis.Select((saving, index) => new double[] { index + 1, saving }))) 
      var cumulativeValues = @(serializer.Serialize(Model.Y2Axis.Select((total, index) => new double[] { index + 1, total }))) 
      var xticks = @Html.Raw(serializer.Serialize(Model.XAxis.Select((month, index) => new object[] { index + 1, month }))) 

      var options = { 
       series: [ 
        { 
         // Bar graph options 
         renderer: $.jqplot.BarRenderer, 
         color: '#009ED6' 
        }, 
        { 
         // Line graph options 
         yaxis: 'y2axis', 
         color: '#3399FF', 
         fillColor: '#59ACFF' 
        } 
       ], 
       seriesDefaults: { 
        rendererOptions: { 
         barWidth: 25, 
         highlightMouseOver: false, 
         smooth: true 
        }, 
        showMarker: false, 
        fill: true, 
        fillAlpha: 0.5, 
        fillAndStroke: true 
       }, 
       grid: { 
        drawBorder: false, 
        shadow: false, 
        background: 'White' 
       }, 
       axes: { 
        xaxis: { 
         tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
         tickOptions: { 
          angle: -90, 
          showGridline: false 
         }, 
         ticks: xticks, 
         label: '@Model.XAxisLabel' 
        }, 
        yaxis: { 
         labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
         labelOptions: 
         { 
          fontSize: '10pt' 
         }, 
         label: '@Model.YAxisLabel' 
        }, 
        y2axis: { 
         min: 0, 
         tickOptions: { 
          showGridline: false 
         }, 
         labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
         labelOptions: 
         { 
          fontSize: '10pt' 
         }, 
         label: '@Model.Y2AxisLabel' 
        } 
       } 
      } 

      if(energyValues.length > 0) 
      { 
       $.jqplot("@uniqueId .barLineGraph", [energyValues, cumulativeValues], options); 
      } 
     } 
    } 
}); 
</script> 

Answer 1

Я решил свою собственную проблему, это было так просто я не знаю, почему я не сделал этого. Важен порядок компонентов серии. Я просто поменял линейный график и ряд гистограмм (так как второй будет на вершине первого), и поменял местами переменными энергией и кумулятивными значениями при построении графика.

По какой-то причине после этого стержни немного сдвинулись вправо. Я просто добавил отрицательный barPadding в серии rendererOptions, и теперь он выглядит отлично.