如何在jQuery的Flot图表X轴显示D-XX格式的自定义字符

我看了你用Flot.js实现的实时更新图表代码，现在要把X轴刻度从90、80、70...0改成D-90、D-80、D-70...D-10的格式，其实只需要给X轴配置加上自定义刻度格式化函数就能搞定。

修改思路 #

在你代码的options.xaxis配置对象里，新增一个tickFormatter属性。这个函数可以接收原始刻度值，然后转换成你想要的文本格式——我们只需要给非0的刻度值加上D-前缀，0刻度直接隐藏就好，正好匹配你要的显示效果。

修改后的完整代码 #

var data = [], totalPoints = 1200, $UpdatingChartColors = $("#updating-chart").css('color');

function getRandomData() {
  if (data.length > 0) data = data.slice(1);
  while (data.length < totalPoints) {
    var prev = data.length > 0 ? data[data.length - 1] : 50;
    var y = prev + Math.random() * 10 - 5;
    if (y < 0) y = 0;
    if (y > 100) y = 100;
    data.push(y);
  }
  var res = [];
  for (var i = 0; i < data.length; ++i) res.push([i, data[i]])
  return res;
}

var updateInterval = 1500;
$("#updating-chart").val(updateInterval).change(function() {
  var v = $(this).val();
  if (v && !isNaN(+v)) {
    updateInterval = +v;
    $(this).val("" + updateInterval);
  }
});

var options = {
  yaxis: { min: 0, max: 100 },
  xaxis: {
    transform: function(v) { return -v; },
    min: 0,
    max: 90,
    // 新增：自定义刻度格式化函数
    tickFormatter: function(v, axis) {
      // 0刻度不显示，其余刻度添加D-前缀
      return v === 0 ? '' : 'D-' + v;
    }
  },
  colors: [$UpdatingChartColors],
  series: {
    lines: {
      lineWidth: 1,
      fill: true,
      fillColor: { colors: [{ opacity: 0.4 }, { opacity: 0 }] },
      steps: false
    }
  }
};

var plot = $.plot($("#updating-chart"), [getRandomData()], options);

补充说明 #

如果之后你需要调整显示规则，比如想要保留D-0刻度，只需要把tickFormatter里的代码改成return 'D-' + v;就可以了，非常灵活。

内容的提问来源于stack exchange，提问作者Gopinath Parthee