如何获得Flot Chart的当前条宽?

时间:2014-12-17 11:32:46

标签: javascript jquery charts flot

我正在使用Flot Chart作为我的条形图......我正在使用顶部的图表值指示器......

var p1 = $.plot($("#received-against-assigned"), data1, {
  xaxis: {
      ticks : ticks,
      axisLabel: "Accounts",
      axisLabelUseCanvas: true,
      axisLabelFontSizePixels: 12,
      axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
      axisLabelPadding: 10
  },
  yaxis: {
      axisLabel: "Emails",
      axisLabelUseCanvas: true,
      axisLabelFontSizePixels: 12,
      axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
      axisLabelPadding: 5
  },
  grid: {
      hoverable: true,
      clickable: false,
      borderWidth: 0
  },
  legend: {
      // labelBoxBorderColor: "none",
      // position: "left"
      show: true,
      noColumns: 5,
      container: "#bar-legend-2"
  },
  series: {
      shadowSize: 1
  },
  tooltip: true
});

这是指标的代码......

$.each(p1.getData()[0].data, function(i, el){
  var o = p1.pointOffset({x: el[0], y: el[1]});
    $('<div class="data-point-label">' + el[1] + '</div>').css( {
      position: 'absolute',
      left: o.left - 32, // Notice here...
      top: o.top - 20,
      display: 'none'
    }).appendTo(p1.getPlaceholder()).fadeIn('slow');
});

现在你可以看到我正在设置left: o.left - 32这是一种静态方式......我的条数可变...取决于帐号的数量......所以数字32不好够...

如果我能以某种方式得到当前的条宽...那么我可以正确地计算和对齐指标......

...谢谢

1 个答案:

答案 0 :(得分:5)

您可以从

获得条形宽度(以轴为单位)
var barWidthInUnits = p1.getOptions().series.bars.barWidth;

如果要以像素为单位计算宽度,还需要获取x轴的比例因子

var barWidthInPixels = barWidthInUnits * p1.getXAxes()[0].scale;

这一半应该是您的价值指标所需的抵消。