渲染x的负浮点值时出现c3.js工具提示问题

Question

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

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

有没有解决方法，或者有人遇到类似的问题？

Answer 1

在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行。只需将0中的.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;
      }
    }
  }
}