使用jqplot繪製圖表需要幫助 - 顯示負值

Question

我正在繪製一些銷售數據。我需要在此屏幕截圖中繪製圖表：。

我已經能夠完成很多這樣的：

jQuery的代碼是這樣的：

plot = $.jqplot('SalesChart2', 
      [ 
       [[1,5]], 
       [[1,10]], 
       [[1,15]], 
       [[1,20]], 
       [[2,-25]], 
       [[3,10]], 
       [[4,10]], 
       [[5, 6]] 
      ] 
      , { 
       // Tell the plot to stack the bars. 
       stackSeries: true, 
       series: [ 
           { label: 'Cash' }, 
           { label: 'CreditCard' }, 
           { label: 'DebitCard' }, 
           { label: 'StoreCredit' }, 
           { label: 'Discount' }, 
           { label: 'AverageTransaction', xaxis: 'xaxis', yaxis: 'y2axis', disableStack: true }, 
           { xaxis: 'xaxis', yaxis: 'y2axis', label: 'ItemsPerTransaction', disableStack: true }, 
           { xaxis: 'xaxis', yaxis: 'y2axis', label: 'CustomerCount', disableStack: true } 
          ], 
       animate: !$.jqplot.use_excanvas, 
       seriesDefaults: { 
        renderer: $.jqplot.BarRenderer, 
        rendererOptions: { 
         highlightMouseDown: true, 
         barWidth: 50 
        }, 
        pointLabels: { show: true } 
       }, 
       axes: { 
        xaxis: { 
         renderer: $.jqplot.CategoryAxisRenderer, 
         ticks: [1,2,3,4,5] 
        }, 
        yaxis: { 
         min: -25, 
         tickOptions: { 
          formatString: "$%'d" 
         } 
        }, 
        y2axis: { 
         autoscale: true, 
         min: 0 
        } 
       }, 
       legend: { 
        show: true, 
        location: 'e', 
        placement: 'outside' 
       }, 
       grid: { 
        drawGridlines: false 
       } 
      }); 

但是，似乎我的思念在jqplot的文檔的東西。首先，如果y軸上有負值，那麼正值也會從y軸上最負值開始。

其次，最後一個系列 - 「客戶數量」在x軸上運行得很遠，並且在刪除容器DIV上的寬度限制時可見。

身體能幫助我嗎？

Answer 1

嘗試......

var plot = $.jqplot('SalesChart2', 
     [ 
      [[1,5]], 
      [[1,10]], 
      [[1,15]], 
      [[1,20]], 
      [[2,-25]], 
      [[3,10]], 
      [[4,10]], 
      [[5,6]] 
     ] 
     , { 
      // Tell the plot to stack the bars. 
      stackSeries: true, 
      series: [ 
          { label: 'Cash' }, 
          { label: 'CreditCard' }, 
          { label: 'DebitCard' }, 
          { label: 'StoreCredit' }, 
          { label: 'Discount'}, 
          { label: 'AverageTransaction', xaxis: 'xaxis', yaxis: 'y2axis', disableStack: true}, 
          { xaxis: 'xaxis', yaxis: 'y2axis', label: 'ItemsPerTransaction', disableStack: true}, 
          { xaxis: 'xaxis', yaxis: 'y2axis', label: 'CustomerCount', disableStack: true } 
         ], 
      seriesDefaults: { 
       renderer: $.jqplot.BarRenderer, 
       rendererOptions: { 
        highlightMouseDown: true, 
        barWidth: 50, 
        fillToZero: true 
       }, 
       pointLabels: { show: true } 
      }, 
      axes: { 
       xaxis: { 
        renderer: $.jqplot.CategoryAxisRenderer, 
        ticks: [1,2,3,4,5,6,7,8], 
        showTicks: false 
       }, 
       yaxis: { 
        min: -25, 
        tickOptions: { 
         formatString: "$%'d" 
        } 
       }, 
       y2axis: { 
        autoscale: true, 
        min: 0 
       } 
      }, 
      legend: { 
       show: true, 
       location: 'e', 
       placement: 'outside' 
      }, 
      grid: { 
       drawGridlines: false 
      } 
     }); 

http://jsfiddle.net/pabloker/jdmq7/