nvd3 그래프의 x 축 사용자 정의 레이블

저는 자바 스크립트를 사용하는 그래프에 익숙하지 않고 현재 프로젝트에 대해 d3과 nvd3을 사용하기 시작했습니다. 나는 nvd3 모듈이 제공하는 다중 막 대형 차트를 플로팅하려하고있다. 그러나 데이터를 플로팅하는 데는 성공했지만 각 시리즈의 x 축 값을 사용자 정의 할 수는 없습니다. 그래프를 플롯하기 위해 x에 정수 값을 사용한다고 생각합니다. 내 질문은 어떻게 각 그래프에 대해 1, 2, 3 대신 X, Y, Z 같은 사용자 지정 값을 표시 할 수 있습니다.nvd3 그래프의 x 축 사용자 정의 레이블

다음은 내가, 그래프가 제대로 생성하는 위의 코드를 사용하여 그래프를 그릴하지만 X 축에 대한 사용자 지정 값 순서가 완전히 경우 내가

var data = [{ 
     "key" : "Step 1", 
     "values" : [{"y" : 5,"x" : 2,},{"y" : 4,"x" : 1,}, {"y" : 4,"x" : 0,}] 
    }, { 
     "key" : "Step 2", 
     "values" : [{"y" : 4,"x" : 0}, {"y" : 5,"x" : 2 }, {"y" : 6,"x" : 1 }] 
    }, { 
     "key" : "Step 3", 
     "values" : [{"y" : 5,"x" : 2}, {"y" : 4,"x" : 0 }, {"y" : 5,"x" : 1 }] 
    }]; 

    var chart; 
    var tickValues = ['X','Y','Z']; 
    nv.addGraph(function() { 
     chart = nv.models.multiBarChart().margin({ 
      bottom : 100 
     }).transitionDuration(300).delay(0).groupSpacing(0.5); 
     chart.multibar.hideable(true); 
     chart.reduceXTicks(true).staggerLabels(true); 
     chart.xAxis.showMaxMin(false) 
      //.tickValues(tickMarks) 
      .tickFormat(function(x){ 
        return tickValues[x] 
       } 
      ); 
     chart.yAxis.tickFormat(d3.format(',.1f')); 
     d3.select('#chart1 svg').datum(data).call(chart); 
     nv.utils.windowResize(chart.update); 
        return chart; 
    });

을 사용하고 내 코드입니다. 나는 X를 데이터 배열 hss x = 0, Y를 데이터 배열 x = 1 등등에 인쇄하고자한다. 하지만 지금은 무작위로오고 있습니다.

나는 데이터 언급 각 축의 원하는 값을 플롯 할 수 있도록

var data = [{ "key" : "Step 1", "values" : [{"y" : 5,"x" : "Z",},{"y" : 4,"x" : "Y",}, {"y" : 4,"x" : "X",}]

로 데이터를 전달하려했지만 작동하지 않습니다. :(

동기화의 값을 유지하는 더 좋은 방법이 있나요? 어떤 도움은 매우 감지 할 수있다. (일반적으로 툴팁에 사용) 시리즈의 레이블을 나타냅니다 당신이 key: Step 1이

출처

2013-09-01 Raghuveer

실제 코드를 볼 수있는 곳이 있습니까? –

http://jsfiddle.net/VBtEx/ 여기 코드가 있습니다. nvd3가 어디에도 호스팅되어 있지 않기 때문에 그래프를 생성 할 수 없었습니다. src 코드를 다운로드하고 내 페이지에 추가해야했습니다. 귀하의 회신에 감사드립니다. – Raghuveer

NVD3에서이 작업을 수행 할 수 없다고 생각합니다.이 작업을 지원하는 것이 아닙니다. 소스 코드를 수정하거나 처음부터 다시 시작해야합니다. –

x 축 레이블로

, 그들은 x 축 라벨은 X 데이터이기 때문에, 제대로 표시 사실에 있습니다. 당신이 당신의 예를 가지고 모든이 x : 0x : "Beer"에, 당신이 무슨 뜻인지 볼 수 변경하는 경우.

여기 x : 0 da에 대한 변경을 보여주는 jsFiddle ta : http://jsfiddle.net/essboyer/ZKqkJ/

출처

2014-01-22 02:08:27

nvd3 그래프의 x 축 사용자 정의 레이블

답변

관련 문제