jqplot - 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 }
}],

无论 tickInterval 是什么，都将强制所有条形为 10 像素宽。 .

编辑:

确定条宽的详细信息在 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;

本质上，我们首先取轴的宽度(或高度)，然后将其除以最大 bin 数(在本例中为条形)。从中我们减去系列之间的总填充(在这种情况下它为零，因为只有一个系列)，然后减去条形外部周围的边距。之后，总条宽除以图中的系列数。

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