5

棒グラフを描きたいとき、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,                                                                  
    },

しかし、各バーの幅が大きすぎて互いにカバーできないことがわかりました。修正方法は？

ありがとう！

4

3 に答える 3

10

シリーズオプションで指定できます：

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

barRendererプラグインを含めることを忘れないでください。jqplotの棒グラフに関するその他のドキュメントについては、 Jqplotのドキュメントをご覧ください。

于 2013-03-06T12:01:26.510 に答える
10

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
    // ...
}

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

例を示すフィドルを用意しました 。

それが役に立てば幸い。

于 2013-11-06T15:13:48.563 に答える
2

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

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

おかげで:AnthonyLeGovic

于 2014-01-14T12:35:30.137 に答える