2014-02-21 64 views
2

當我製作條線圖形時,線條默認位於最上面。我有一個實線圖,我希望它在我的條形圖後面。有沒有辦法做到這一點?jqplot線條圖線條背後的線條圖

下面是我的代碼,它看起來很長,但大多數只是其他選項。有一個月能量值的條形圖,線圖(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> 

This is what my graph currently looks like

+1

你可以發佈你的當前代碼嗎? – explunit

+0

這樣比較好。 ;) – iConnor

回答

3

我解決我自己的問題,它是如此簡單,我不知道爲什麼我沒有做到這一點。系列組件的順序很重要。我只是交換了線圖和條形圖系列(因爲第二個將在第一個之上),並在繪圖時交換了energyValues和cumulativeValues。

由於某些原因,酒吧稍後向右移位。我在系列rendererOptions中添加了負面barPadding,現在看起來很完美。