Raphael js 차트에 X 축 및 Y 축 레이블을 추가하는 방법

Question

Raphael.js를 사용하여 데이터 그래프를 만들려고합니다. 그 후 내가 해결하려고하는 js에 몇 가지 제한 사항이 있음을 알고 있습니다. .

값이 500을 초과하면 동적으로 y 축 값을 축척하는 방법을 아는 사람이 있습니까? 그래프가 전혀 나타나지 않고 한 축의 극단 가장자리에 축이 표시됩니다 (ie 한계 이상).

둘째, 범례 또는 축 레이블을 그래프에 추가 할 수 있습니까? 또는 그래프 레이블을 html로 별도로 코딩해야합니까?

고맙습니다. 그것의 훌륭한 찾고 도구지만, 꽤 쓸모없는 것 같습니다 ...

Answer 1

차트 g.bar.js는 축을 그릴 수있는 옵션이 없습니다. 당신이 내부 g.line.js를 보면, 그러나, 축립니다 98-117 (현재) 라인 주위에 코드 블록이있다 :

var allx = Array.prototype.concat.apply([], valuesx), 
     ally = Array.prototype.concat.apply([], valuesy), 
     xdim = chartinst.snapEnds(Math.min.apply(Math, allx), Math.max.apply(Math, allx), valuesx[0].length - 1), 
     minx = xdim.from, 
     maxx = xdim.to, 
     ydim = chartinst.snapEnds(Math.min.apply(Math, ally), Math.max.apply(Math, ally), valuesy[0].length - 1), 
     miny = ydim.from, 
     maxy = ydim.to, 
     kx = (width - gutter * 2)/((maxx - minx) || 1), 
     ky = (height - gutter * 2)/((maxy - miny) || 1); 

    var axis = paper.set(); 

    if (opts.axis) { 
     var ax = (opts.axis + "").split(/[,\s]+/); 
     +ax[0] && axis.push(chartinst.axis(x + gutter, y + gutter, width - 2 * gutter, minx, maxx, opts.axisxstep || Math.floor((width - 2 * gutter)/20), 2, paper)); 
     +ax[1] && axis.push(chartinst.axis(x + width - gutter, y + height - gutter, height - 2 * gutter, miny, maxy, opts.axisystep || Math.floor((height - 2 * gutter)/20), 3, paper)); 
     +ax[2] && axis.push(chartinst.axis(x + gutter, y + height - gutter, width - 2 * gutter, minx, maxx, opts.axisxstep || Math.floor((width - 2 * gutter)/20), 0, paper)); 
     +ax[3] && axis.push(chartinst.axis(x + gutter, y + height - gutter, height - 2 * gutter, miny, maxy, opts.axisystep || Math.floor((height - 2 * gutter)/20), 1, paper)); 
    } 

이 효과적으로 g에 VBarchart을 복사 함수에 붙여 넣을 수 있습니다 .bar.js를 사용하여 축 옵션을 제공합니다. x와 y 위치에 대한 약간의 조정이 필요하며, maxy는 스케일링을 올바르게하기 위해 opts.total로 설정해야합니다. 그렇습니다. 약간 그렇습니다.하지만 제대로 작동합니다.