javascript - 如何使用plottable.js检查标签格式化程序中的原始值？

我有一个使用Plottable的相对简单的条形图。所有条形图都从0开始，但是第三个条形图可以是负数并更改颜色。为了以这种方式显示，对于第三条，我使用Math.abs(value)。问题是当它为负数时，我需要让标签实际显示它也为负数。如何设置标签以在此处正确显示负数，但保持图形的相同格式？

注意：该脚本可以运行几次，以查看利润栏的正面和负面版本。

function HBarChart(key, state) {
  var colors = {
    Sales: '#00c786',
    Expenses: '#f5a623',
    Profit: '#009464',
    Profit_neg: '#ea655d'
  };

  this._eleSelector = 'svg#' + key;
  this.xScale = new Plottable.Scales.Linear().domainMin(0);
  this.yScale = new Plottable.Scales.Category();
  this.xAxis = new Plottable.Axes.Numeric(this.xScale, 'bottom');
  this.yAxis = new Plottable.Axes.Category(this.yScale, 'left')
    .innerTickLength(0)
    .endTickLength(0);

  this.plot = new Plottable.Plots.Bar('horizontal')
    .x(function(d) {
      return Math.abs(d.x);
    }, this.xScale)
    .y(function(d) {
      return d.category;
    }, this.yScale)
    .attr("fill", function(d) {
      return colors[d.category + (d.x < 0 ? '_neg' : '')];
    })
    .labelFormatter(function(d) {
      return Intl.NumberFormat('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(d);
    })
    .labelsEnabled(true);

  this.setData(state);
  this.chart = new Plottable.Components.Table([
    [this.yAxis, this.plot]
  ]);

  this.chart.renderTo(this._eleSelector);
}

HBarChart.prototype.setData = function(state) {
  var dummySet = {
    revenue: Math.random() * 10000 + 1000,
    expense: Math.random() * 10000 + 1000
  };

  dummySet.profit = dummySet.revenue - dummySet.expense;

  var dataSet = [{
    category: 'Sales',
    x: dummySet.revenue
  }, {
    category: 'Expenses',
    x: dummySet.expense
  }, {
    category: 'Profit',
    x: dummySet.profit
  }];
  if (this.dataset) {
    this.plot.removeDataset(this.dataset);
  }

  this.dataset = new Plottable.Dataset(dataSet);
  this.plot.addDataset(this.dataset);

}

new HBarChart('test');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.0.0/plottable.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.0.0/plottable.min.js"></script>

<svg id="test"></svg>

最佳答案

您可以覆盖xScale.scale函数以从绝对域值计算te范围值：

  var origXScale = this.xScale.scale.bind(this.xScale);
  this.xScale.scale = function(d) {
    return origXScale(Math.abs(d));
  };

并让x访问器返回原始值：

 this.plot = new Plottable.Plots.Bar('horizontal')
  .x(function(d) {
    return d.x;
  }, this.xScale)

这样，格式化程序还将获得原始值。

完整示例：

function HBarChart(key, state) {
  var colors = {
    Sales: '#00c786',
    Expenses: '#f5a623',
    Profit: '#009464',
    Profit_neg: '#ea655d'
  };

  this._eleSelector = 'svg#' + key;
  this.xScale = new Plottable.Scales.Linear().domainMin(0);
  var origXScale = this.xScale.scale.bind(this.xScale);
  this.xScale.scale = function(d) {
       return origXScale(Math.abs(d));
  };
  this.yScale = new Plottable.Scales.Category();
  this.xAxis = new Plottable.Axes.Numeric(this.xScale, 'bottom');
  this.yAxis = new Plottable.Axes.Category(this.yScale, 'left')
    .innerTickLength(0)
    .endTickLength(0);

  this.plot = new Plottable.Plots.Bar('horizontal')
    .x(function(d) {
      return d.x;
    }, this.xScale)
    .y(function(d) {
      return d.category;
    }, this.yScale)
    .attr("fill", function(d) {
      return colors[d.category + (d.x < 0 ? '_neg' : '')];
    })
    .labelFormatter(function(d) {
      return Intl.NumberFormat('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(d);
    })
    .labelsEnabled(true);

  this.setData(state);
  this.chart = new Plottable.Components.Table([
    [this.yAxis, this.plot]
  ]);

  this.chart.renderTo(this._eleSelector);
}

HBarChart.prototype.setData = function(state) {
  var dummySet = {
    revenue: Math.random() * 10000 + 1000,
    expense: Math.random() * 10000 + 1000
  };

  dummySet.profit = dummySet.revenue - dummySet.expense;

  var dataSet = [{
    category: 'Sales',
    x: dummySet.revenue
  }, {
    category: 'Expenses',
    x: dummySet.expense
  }, {
    category: 'Profit',
    x: dummySet.profit
  }];
  if (this.dataset) {
    this.plot.removeDataset(this.dataset);
  }

  this.dataset = new Plottable.Dataset(dataSet);
  this.plot.addDataset(this.dataset);

}

new HBarChart('test');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.0.0/plottable.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.0.0/plottable.min.js"></script>

<svg id="test"></svg>

关于javascript - 如何使用plottable.js检查标签格式化程序中的原始值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37743796/