jqplotのバー幅が大きすぎる

Question

jqplotを初めて使用しました。棒グラフを描画するときに、x軸は日付、間隔は1日です。

 axesDefaults:{                 
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,        
     tickOptions:{ 
      fontSize:'10pt', 
     },                   
    },                    
    axes:{                   
     xaxis:{ 
      renderer:$x_renderer,             
      tickOptions:{ 
       formatString:'%Y-%#m-%#d',           
      }, 
      rendererOptions:{              
       tickOptions:{ 
        angle:-90,              
       }                 
       },                  
      label:'$label', 
      tickInterval:'86400000', 
     }, 
     yaxis:{                  
      tickOptions:{ 
       formatString:'%.2f',             
      },                  
      autoscale:true               
     }, 
    },                    
    highlighter:{ 
     show:true,                 
    }, 

しかし、私は、各バーの幅がお互いをカバーするには大きすぎる見つける：これは私のコードの一部です。それを修正するには？

ありがとうございます！

Answer 1

AnthonyLeGovic答えは確かに正しいですが、あなたは次の操作を行うことができ、データポイントの数に応じて、列幅を変更する必要がある場合：

// Get the size of the container of the plot 
var width = jQuery(containerName).width(); 

// Divide by the number of data points. 
width = width/number_of_data_points; 

// Reduce the width to a % of the total for each data point. 
width = (width * 20)/100; 

// Set the value 
$.jqplot(containerName, [data], 
{ 
    // whatever 
    // ... 

    seriesDefault: 
    { 
     renderer: $.jqplot.BarRenderer, 
     rendererOptions: { barWidth: width } 
    } 

    // whatever 
    // ... 
} 

私は凡例の幅を考慮していないことに注意してください。凡例幅はプロット後のみ取得できるので、凡例幅を考慮して列幅を縮小する場合は、プロット後に行う必要があります。

例を示すfiddleを用意しました。

希望します。

Answer 2

あなたはシリーズのオプションでそれを指定することができます。

seriesDefault:{ 
    renderer: $.jqplot.BarRenderer, 
    rendererOptions: { 
     barWidth: 5 
    } 
} 

はbarRendererプラグインを含めることを忘れないでください。 jqplot上の棒グラフの詳細ドキュメンテーションについては を見てみてください。Jqplot documentation

Answer 3

私は以下のコードを追加して結果を得ました。 バー幅がシリーズのデフォルトブロックに設定されていないため、幅の後ろの理由が大きくなりすぎました。

seriesDefault:{ 
    renderer: $.jqplot.BarRenderer, 
    rendererOptions: { 
      barWidth: 5 
    } 
} 

おかげ：あなたの答えのためのAnthonyLeGovic