NVD3.js yAxis和工具提示不同的精確度

我使用NVD3.js來顯示多行圖表。NVD3.js yAxis和工具提示不同的精確度

我想Y軸顯示爲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個個小數位線的工具提示。

這可能嗎？

來源

2013-10-17 theHaggis

您可以設置被調用的函數，通過圖表對象的.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))

這意味着，刻度格式化軸將影響它，所以爲了達到更高的精度在那裏，你需要得到直接的價值 - lines可以通過訪問chart.lines。

來源

2013-10-17 10:43:30

我確實嘗試過編輯該功能，並且它對工具提示沒有任何影響 – theHaggis

您是否使用最新版本的NVD3（來自源存儲庫）？你使用哪種圖表類型？ –

是的，我昨天拉它，我正在使用lineChart模型。圖表= nv.models.lineChart（） – theHaggis

在他們有像這樣（折線圖）線nvd3來源：

interactiveLayer.dispatch.on('elementMousemove', function(e) { 
    ... 
     var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex)); 
     interactiveLayer.tooltip 
       .position({left: pointXLocation + margin.left, top: e.mouseY + margin.top}) 
       ... 
       .valueFormatter(function(d,i) { 
       return yAxis.tickFormat()(d); 
       }) 
       .data(
        { 
        value: xValue, 
        series: allData 
        } 
      )(); 
... 
}

所以，如果你想覆蓋像tooltip.contentGenerator你被卡住它給你的數據。我認爲這樣做的好方法是爲tooltip x格式化器設置一個setter或其他的東西，然後它將使用axis格式器。或者簡單地將原始數據與價值和系列一起發送。

我的用例是我在圖表上顯示7天的時間刻度，我只勾選每天的開始。但是，在工具提示中，我想更詳細地查看這些數據。

這是我拉的請求特定的準則工具提示

https://github.com/novus/nvd3/pull/444

呼叫：chart.tooltipXAxisFormatter（d3.time.format（toolTipFormat））;將設置它。

來源

2014-02-12 23:18:19

NVD3.js yAxis和工具提示不同的精確度

回答

相關問題