javascript – NVD3.js yAxis和tooltip不同的percision

我正在使用NVD3.js来显示多线图.

我希望yAxis显示为2位十进制数

编辑的答案

 var chart;

    nv.addGraph(function () {
        chart = nv.models.lineChart()
        .options({
            margin: { left: 140, bottom: 50 },
            x: function (d, i) {
                return i;
            },
            showXAxis: true,
            showYAxis: true,
            transitionDuration: 250,
            tooltips: true,
            tooltipContent: function (key, x, y, e, graph) {
                return '<h3>' + key + '</h3>' +
                       '<p>' + e.point.y + ' at ' + x + '</p>'
            }
        });

        // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
        chart.xAxis
            .axisLabel("Maturity")
            .tickFormat(function(d) { return pivotedData[0].values[d].x; });

        chart.yAxis
            .axisLabel('Model Spread').tickFormat(d3.format(',.2f'));


        d3.select('#chart1 svg')
          .datum(pivotedData)
          .call(chart);

        //TODO: Figure out a good way to do this automatically
        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });

        return chart;
    });

但是在线上的工具提示中我想显示12位小数.

这可能吗？

解决方法:

您可以设置调用的函数,以通过图表对象的.tooltipContent格式化工具提示的内容.默认功能定义如下.

tooltip = function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' at ' + x + '</p>'
}

您可以根据自己的喜好格式化y的值.请注意,y定义为

yAxis.tickFormat()(lines.y()(e.point, e.pointIndex))

这意味着轴的刻度格式将影响它,因此为了在那里获得更高的精度,您需要直接获取值 – 可以通过chart.lines访问行.

标签：nvd3-js,javascript,d3-js
来源： https://codeday.me/bug/20190831/1775677.html