1

我正在使用 c3.js 创建图表，这是我发现的一个问题。如果您有一个带有负浮点 x 值的数据点，则工具提示会将此值四舍五入为最接近的整数。

您可以尝试仅通过更改此示例中的数据来执行此操作。只需将其中一个 x 值更改为负浮点值，然后将鼠标悬停在该点上并注意工具提示报告的 x 值。

有没有办法解决这个问题，或者有没有人遇到过类似的问题？

4

1 回答 1

2

在 c3.js 中查找以下函数：

Axis.prototype.getXAxisTickFormat = function getXAxisTickFormat() {

在此函数内部，有一个format变量导致负 x 轴值被舍入。

format = $$.isTimeSeries() ? $$.defaultAxisTimeFormat : $$.isCategorized() ? $$.categoryName : function (v) { return v < 0 ? v.toFixed(0) : v; }

上面的代码行有一个三元运算符，用于检查 x 轴值是“时间序列”还是“分类”。在我们的情况下，值都不是，因此format变量设置为以下函数：

function (v) { return v < 0 ? v.toFixed(0) : v; }

此函数将保留任何大于 0 的整数，但会将任何负整数四舍五入到小数点后 0 位，并使用.toFixed(0)将整数转换为字符串。

将这format一行替换为我在下面写的那一行，它将从负值中删除四舍五入：

format = $$.isTimeSeries() ? $$.defaultAxisTimeFormat : $$.isCategorized() ? $$.categoryName : function (v) { return v; };

我今天只测试了这个，虽然我没有发现任何问题，但负数转换为字符串值可能是有原因的，如果是这样，您可能希望保持format原样，只需将0in替换.toFixed(0)为 #你想要的小数。

[更新] 如果您不想编辑 c3.js 源代码，您还可以使用工具提示和 x/y 刻度的格式选项。见：http ://c3js.org/samples/tooltip_format.html

这是我用于 y 轴值的函数。它将刻度值四舍五入到小数点后 3 位，但去除尾随零。

axis : {
  y:{
    tick: {
      format: function (d) {
        var df = Number( d3.format('.3f')(d) );
        return df;
      }
    }
  }
}
于 2015-08-10T21:08:25.297 回答