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
        }
    },
});

当我在 7 天和 14 天之间更改 tickInterval 时，条形的宽度会发生变化，尽管在同一物理区域上存在相同数量的条形。在计算条形宽度时如何使用 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;

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

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

于 2013-02-02T05:47:05.693 回答
0

非常感谢您的回答。这是旧的，但这是我为解决我的问题所做的

$.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为BarRenderer使用值的数量而不是刻度的数量。其余代码来自 BarRenderer 对象，在更新时保持不变。

要使用它，只需使用：

var plot = $.jqplot('graphID', [graphData], {
    axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer
      }
    },
    seriesDefaults:{
      renderer:$.jqplot.DateBarRenderer
    }
  });
于 2013-09-23T19:22:16.807 回答