2013-06-26 3 views
5

누적 선 차트의 선 위로 마우스를 가져 가면 y 시간에 툴팁 메시지 x 값이 표시됩니다. 이 메시지를 편집하고 더 많은 콘텐츠를 추가하고 싶습니다.nvd3의 cumulativeLineChart에 대한 사용자 정의 툴팁

내 값 배열에 {X : x, Y : y, Z : z, Dt : date}가 포함 된 json이 있으므로 날짜에 X/Y/Z 목록을 표시하고 싶습니다. 아직 적절한 해결책을 발견하지 않은 경우

+0

[cumulativeLineChart.js] (https://github.com/novus/nvd3/blob/master/src/models/cumulativeLineChart.js#L25)에서 수정할 수 있습니다. ** line 25 **에 문자열을 추가하십시오. 최선의 방법은 아니지만 문제에 대한 해결책 일 수 있습니다. – shabeer90

답변

2

, 여기 당신이 시도 -

nv.addGraph(function() { 
    var chart = nv.models.cumulativeLineChart().x(function(d) { 
     return d[0] 
    }).y(function(d) { 
     return d[1] 
    }).color(d3.scale.category10().range()).tooltip(function(key, x, y, e, graph) { 
     return '<h3>' + key + ' Custom Text Here ' + x + '</h3> here' + '<p> or here ,' + y + '</p>' 
    }); 
}); 

는 도움이되기를 바랍니다.

+2

위대한, 이것은 나를 위해 완벽하게 작동했습니다. 약간의 정보를 추가하기 만하면 각 데이터 노드의 추가 데이터에 'e'매개 변수를 통해 액세스 할 수 있습니다. e.point.Z는 Z 값을 가져옵니다. – Andrei

6

저는 nvd3 veraion 1.1.15b를 사용하고 있습니다.

다음 코드와 같이 않았다 나를 위해 작동하지 않았다 .tooltip()를 호출하지만, .tooltipContent() 전화 : 당신은 포맷 할 수 있도록

 var chart = nv.models.pieChart() 
      .x(function (d) { return d.file; }) 
      .y(function (d) { return d.size; }) 
      .tooltipContent(function (key, y, e, graph) { 
       return '<h3>' + key + '</h3>' + 
        '<p>' + e.value.toSizeFmt() + '</p>'; 
      }) 

Andrei으로 포인트를 위는 e 매개 변수는 원시 값에 대한 액세스를 제공합니다 이미 포맷 된 텍스트 인 y으로 작업하는 대신 희망이 도움이!

관련 문제