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的{{1}}函数中。

举个例子，计算未堆积x轴的条形宽度（y轴非常相似）如下：

jqplot.barRenderer.js

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

从该代码中可以看出，重要的一点是确定要显示的刻度数。在您的特定情况下，这发生在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） - 315 - 然后除以间隔中的天数，来自yoru问题的是7或14，分别给出46和24。

Answer 2

非常感谢你的回答。这是旧的，但这就是我在我的案例中解决问题的方法

$.jqplot.DateBarRenderer = function(){
    $.jqplot.BarRenderer.call(this);
};
$.jqplot.DateBarRenderer.prototype = new $.jqplot.BarRenderer();

  $.jqplot.DateBarRenderer.prototype.setBarWidth = function() {
  // need to know how many data values we have on the approprate axis and figure it out.
  var i;
  var nvals = 0;
  var nseries = 0;
  var paxis = this[this._primaryAxis];
  var s, series, pos;
  var temp = this._plotSeriesInfo = this.renderer.calcSeriesNumbers.call(this);
  nvals = temp[0];
  nseries = temp[1];
  var nticks = paxis.numberTicks;
  var nbins = (nticks-1)/2;
  // so, now we have total number of axis values.
  if (paxis.name == 'xaxis' || paxis.name == 'x2axis') {
      if (this._stack) {
          this.barWidth = (paxis._offsets.max - paxis._offsets.min) / nvals * nseries - this.barMargin;
      }
      else {
          this.barWidth = ((paxis._offsets.max - paxis._offsets.min)/ (nvals + 1 )  - this.barPadding * (nseries-1) - this.barMargin*2)/nseries;
          //this.barWidth = ((paxis._offsets.max - paxis._offsets.min)/nbins  - this.barPadding * (nseries-1) - this.barMargin*2)/nseries;
          // this.barWidth = (paxis._offsets.max - paxis._offsets.min) / nvals - this.barPadding - this.barMargin/nseries;
      }
  }
  else {
      if (this._stack) {
          this.barWidth = (paxis._offsets.min - paxis._offsets.max) / nvals * nseries - this.barMargin;
      }
      else {
          this.barWidth = ((paxis._offsets.min - paxis._offsets.max)/nbins  - this.barPadding * (nseries-1) - this.barMargin*2)/nseries;
          // this.barWidth = (paxis._offsets.min - paxis._offsets.max) / nvals - this.barPadding - this.barMargin/nseries;
      }
  }
  return [nvals, nseries];
};

我只是替换setBarWidth的{{1}}来使用值的数量而不是刻度的数量。其余代码来自BarRenderer对象，在更新时保持不变。

要使用它，只需使用：

BarRenderer

jqplot如何计算条宽？

2 个答案: