jqplot如何计算条宽？

Question

我试图了解当未指定宽度时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
        }
    },
});

当我在7天到14天之间更改tickInterval时,尽管在同一物理区域上有相同数量的条形,但条形的宽度会改变.tickInterval如何用于计算条宽？或者失败了,我怎么能改变这个例子,使得tickInterval可以变化(最终将根据数据计算),但是条形的宽度可以设置为合理的？

Answer 1

在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;

基本上,我们首先取轴的宽度(或高度),然后除以最大的箱数(在这种情况下为柱).从中我们减去系列之间的总填充(在这种情况下它是零,因为只有一个系列)然后减去条形外部的边距.之后,总条宽除以图中的系列数.

从该代码中可以看出,重要的一点是确定要显示的刻度数.在你的特殊情况下,这发生在DateAxisRenderer,它基本上找到最大和最小日期之间的天数('2013-1-20' and '2013-12-1') - 315 - 除以间隔中的天数,从yoru问题是7或14,分别给出46和24.