使用气泡绘制图表

Question

我正在使用jQuery Flot和Bubbles插件生成如下所示的图表。只要Y轴值至少为100，图表/气泡就会按预期渲染。当然，我绘制的一些值<100且有些值甚至小于1.以下jsfiddle显示样本数据集那工作/不工作。

我没有在Flot或Bubbles文档中看到Y轴值必须> 100.感谢任何建议。

http://jsfiddle.net/gstoa/rr3bqz5w/

//var dataEarningsActual =   [[1, 15, 10], [2, 15, 10], [3, 16, 10], [4, 13, 10]];
//var dataEarningsEstimate = [[1, 13, 10], [2, 14, 10], [3, 12, 10], [4, 15, 10]];
var dataEarningsActual =   [[1, 150, 10], [2, 150, 10], [3, 160, 10], [4, 130, 10]];
var dataEarningsEstimate = [[1, 130, 10], [2, 140, 10], [3, 120, 10], [4, 150, 10]];
var dataEarningsPeriods =  [[1,'Q1 2017'], [2,'Q2 2017'], [3,'Q3 2017'], [4,'Q4 2017']];

var optionsEarnings = {
  series: {
    color: "#62CB31",
    bubbles: {
      active: true,
      show: true,
      fill: true,
      linewidth: 2
    }
  },
  xaxis: {
    ticks: dataEarningsPeriods,
    autoscaleMargin: 0.25
  },
  yaxis: {
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 10
  },
  grid: {
    tickColor: "#f0f0f0",
    borderWidth: 1,
    borderColor: 'f0f0f0',
    color: '#6a6c6f'
    }

};

$.plot( $("#placeholder"), [ dataEarningsActual, { color: '#6a6c6f', data: dataEarningsEstimate }], optionsEarnings );

Answer 1

我通过利用Flot的tickFormatter调用y轴数据值找到了解决方案。为了考虑输入的十进制值，我必须首先将每个值乘以1,000（服务器端），然后使用格式化程序函数调用除以1000.无论哪种方法都有效，我猜。

https://jsfiddle.net/gstoa/rr3bqz5w/

var dataEarningsActual =   [[1, 150, 10], [2, 150, 10], [3, 160, 10], [4, 130, 10]];
var dataEarningsEstimate = [[1, 130, 10], [2, 140, 10], [3, 120, 10], [4, 150, 10]];
var dataEarningsPeriods =  [[1,'Q1 2017'], [2,'Q2 2017'], [3,'Q3 2017'], [4,'Q4 2017']];

function formatter(val, axis) {
	//turns 150 into .15
	return val / 1000; 
}

var optionsEarnings = {
  series: {
    color: "#62CB31",
    shadowSize: 5,
    bubbles: {
      active: true,
      show: true,
      fill: true,
      linewidth: 1
    }
  },
  xaxis: {
    ticks: dataEarningsPeriods,
    autoscaleMargin: 0.25
  },
  yaxis: {
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 0,
    tickDecimals: 2,
    tickFormatter: formatter
  },
  grid: {
    tickColor: "#f0f0f0",
    borderWidth: 1,
    borderColor: 'f0f0f0',
    color: '#6a6c6f'
	}

};