4

幅が指定されていない場合に jqplot がバーの幅を計算する方法を理解しようとしています。次のチャートがあるとします。

$.jqplot(chartDiv.attr("id"), [
    [
        ['2013-02-15', 0],
        ['2013-03-01', 2],
        ['2013-03-15', 4],
        ['2013-03-29', 6],
        ['2013-04-12', 8],
        ['2013-04-26', 10],
        ['2013-05-10', 12],
        ['2013-05-24', 14],
        ['2013-06-07', 16],
        ['2013-06-21', 18],
        ['2013-07-05', 20],
        ['2013-07-19', 22],
        ['2013-08-02', 24],
        ['2013-08-16', 26],
        ['2013-08-30', 28],
        ['2013-09-13', 30],
        ['2013-09-27', 32],
        ['2013-10-11', 34],
        ['2013-10-25', 36],
        ['2013-11-08', 38], , ], ], {


    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            min: '2013-1-20',
            max: '2013-12-1',
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickInterval: '14 days',
            tickOptions: {
                angle: 45,
                formatString: '%d/%m/%Y',
            },
        }
    },
    series: [{
        xaxis: 'xaxis',
        yaxis: 'yaxis',
        renderer: $.jqplot.BarRenderer,
    }],
    seriesDefaults: {
        shadow: false,
    },
    axesDefaults: {
       useSeriesColor: true,
        rendererOptions: {
            alignTicks: true
        }
    },
});

tickInterval を 7 日から 14 日の間で変更すると、同じ物理領域に同じ数のバーがあるにもかかわらず、バーの幅が変わります。バー幅の計算で tickInterval はどのように使用されますか? または、それが失敗した場合、 tickInterval が変化するようにこの例を変更するにはどうすればよいですか (最終的にはデータから計算されます)、バーの幅は適切なものに設定されますか?

4

2 に答える 2

9

でjqplot.barRenderer.js呼ばれるプロパティがありますbarWidth：

// prop: barWidth
// Width of the bar in pixels (auto by devaul).  null = calculated automatically.
this.barWidth = null;

シリーズオプションを設定するときに、を指定することもできますrendererOptions。これを追加する：

rendererOptions: { barWidth: 10 }

したがって、次のようにseriesなります。

series: [{
    xaxis: 'xaxis',
    yaxis: 'yaxis',
    renderer: $.jqplot.BarRenderer,
    rendererOptions: { barWidth: 10 }
}],

に関係なく、すべてのバーの幅を10ピクセルに強制しますtickInterval。

編集：

バー幅を決定するための詳細は、のsetBarWidth関数にありjqplot.barRenderer.jsます。

例を挙げると、スタックされていないx軸（y軸の場合と非常に似ています）のバー幅の計算は次のとおりです。

var nticks = paxis.numberTicks;
var nbins = (nticks-1)/2;

this.barWidth = ((paxis._offsets.max - paxis._offsets.min) / nbins -
    this.barPadding * (nseries - 1) - this.barMargin * 2) / nseries;

基本的に、最初に軸の幅（または高さ）を取得し、それをビンの最大数（この場合はバー）で除算します。これから、シリーズ間の合計パディング（この場合、シリーズが1つしかないためゼロ）を差し引き、次にバーの外側のマージンを差し引きます。その後、合計バー幅がプロット内の系列の数で除算されます。

そのコードからわかるように、重要なビットは実際に表示するティック数を確立することです。あなたの特定のケースでは、これはで発生しますDateAxisRenderer。ここでは、基本的に、最大日と最小日の間の日数（'2013-1-20' and '2013-12-1'）-315-を、間隔内の日数で割る前に検出します。これは、yoruの質問から7または14のいずれかでした。それぞれ46と24を与えます。

于 2013-02-02T05:47:05.693 に答える