gRaphael 선형 차트가 축을 넘어 값을 그립니다.

Question

x 축을 따라 밀리 초 단위로 gRaphael을 사용하여 선형 차트를 그릴 때 일반적으로 데이터 요소 배치에 불일치가 발생합니다. 가장 일반적으로 초기 데이터 포인트는 y 축의 왼쪽에 있습니다 (아래 바이올린에서 볼 수 있듯이), 마지막 데이터 포인트는 뷰 박스의 오른쪽 너머에/x 축의 끝을 지나갈 때가 있습니다 .

아는 사람 있나요 : 이런 일이 발생하는 이유 1), (내가 때를 알고 있다면 내가/라인을 이동 변환 사용 포인트 수 있습니다 그것을 확인하는 방법을 방지하는 방법 2), &/또는 3) 얼마나 많은 일이 있었는지).

내 코드 :

var r = Raphael("holder"), 
txtattr = { font: "12px sans-serif" }; 
var r2 = Raphael("holder2"), 
txtattr2 = { font: "12px sans-serif" }; 

var x = [], y = [], y2 = [], y3 = []; 

for (var i = 0; i < 1e6; i++) { 
    x[i] = i * 10; 
    y[i] = (y[i - 1] || 0) + (Math.random() * 7) - 3; 
} 
var demoX = [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]]; 
var demoY = [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]]; 

var xVals = [1288885800000, 1289929440000, 1290094500000, 1290439560000, 1300721700000, 1359499228000, 1359499308000, 1359499372000]; 
var yVals = [80, 76, 70, 74, 74, 78, 77, 72]; 
var xVals2 = [1288885800000, 1289929440000]; 
var yVals2 = [80, 76]; 

var lines = r.linechart(10, 10, 300, 220, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }) 
.hoverColumn(function() { 
    this.tags = r.set(); 

    for (var i = 0, ii = this.y.length; i < ii; i++) { 
     this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }])); 
     } 
    }, function() { 
     this.tags && this.tags.remove(); 
     }); 

lines.symbols.attr({ r: 3 }); 


var lines2 = r2.linechart(10, 10, 300, 220, xVals2, yVals2, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }) 
.hoverColumn(function() { 
    this.tags = r2.set(); 

    for (var i = 0, ii = this.y.length; i < ii; i++) { 
     this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }])); 
     } 
    }, function() { 
     this.tags && this.tags.remove(); 
     }); 

lines2.symbols.attr({ r: 3 }); 

내가 gRaphael과 x 축이 밀리 초이어야 사용해야합니까

차 예를 들어 바이올린 (이 나중에 표지/사용자 정의 날짜 문자열 w) : http://jsfiddle.net/kcar/aNJxf/

보조 예 바이올린 (페이지 4 번째 예는 종종 두 축 에러를 나타낸다) http://jsfiddle.net/kcar/saBnT/

근본 원인은 snapEnds 함수 (줄 718 g.raphael.js)입니다. 어떤 경우에는 문제가 없지만 다른 경우에는 날짜를 /에서 날짜를 더하거나 뺍니다.

이 시점 이후로 모든 단계를 거치지는 않았지만 반올림이 미쳐지면 데이터 포인트가 잘못 배치되기 때문에 그렇지 않은 경우가 아니라면 문제가 발생한다고 가정합니다. SnapEnds에 전송되기 전에 차트 열을 계산하여 값이 잘못 계산 된 데이터를 수신하는 것만을 확인합니다. 투명한 세트에 추가 g.raphael.js

여전히

snapEnds: function(from, to, steps) { 
    var f = from, 
     t = to; 

    if (f == t) { 
     return {from: f, to: t, power: 0}; 
    } 

    function round(a) { 
     return Math.abs(a - .5) < .25 ? ~~(a) + .5 : Math.round(a); 
    } 

    var d = (t - f)/steps, 
     r = ~~(d), 
     R = r, 
     i = 0; 

    if (r) { 
     while (R) { 
      i--; 
      R = ~~(d * Math.pow(10, i))/Math.pow(10, i); 
     } 

     i ++; 
    } else { 
     if(d == 0 || !isFinite(d)) { 
      i = 1; 
     } else { 
      while (!r) { 
       i = i || 1; 
       r = ~~(d * Math.pow(10, i))/Math.pow(10, i); 
       i++; 
      } 
     } 

     i && i--; 
    } 

    t = round(to * Math.pow(10, i))/Math.pow(10, i); 

    if (t < to) { 
     t = round((to + .5) * Math.pow(10, i))/Math.pow(10, i); 
    } 

    f = round((from - (i > 0 ? 0 : .5)) * Math.pow(10, i))/Math.pow(10, i); 
    return { from: f, to: t, power: i }; 
}, 

Answer 1

라운딩 넌센스에 응답하고 더 이상 문제가 없으며 차트의 다른 영역이나 다른 영역에서 단점도 발견되지 않았습니다. 당신이 그것을 본다면 나는 그것을 듣고 싶다. 지금 g.raphael.js에서 해당 기능의

코드 :

snapEnds: function(from, to, steps) { 
    return {from: from, to: to, power: 0};  
}, 

Answer 2

가 발생하는 이유를 모르겠에서 그 함수의

코드는 바람직한 옵션이 아니었다. 데이터 포인트가 그래프 외부에서 렌더링되었는지 확인하는 가장 간단한 방법은 축 세트의 경계 상자와 데이터 포인트의 경계 상자를 가져 와서 x와 x2 값의 차이를 확인하는 것입니다. 누군가가 데이터 포인트 세트를 확장을 도와, 또는이 전혀 발생하지 만드는 방법을 알아낼 수 있다면

, 나는 아직도 행복하게 감사합니다/최대 투표 snapEnds에서 제거

//assuming datapoints is the Raphael Set for the datapoints, axes is the 
//Raphael Set for the axis, and datalines is the Raphael Set for the 
//datapoint lines 
var pointsBBox = datapoints.getBBox(); 
var axesBBox = axes.getBBox(); 
var xGapLeft = Math.ceil(axesBBox.x - pointsBBox.x); 
//rounding up to integer to simplify, and the extra boost from y-axis doesn't 
//hurt, <1 is a negligible distance in transform 
var xGapRight = Math.ceil(axesBBox.x2 - pointsBBox.x2); 
var xGap = 0; 
if(xGapLeft > 0){ 
    datapoints.transform('t' +xGapLeft +',0'); 
    datalines.transform('t' +xGapLeft +',0'); 
    xGap = xGapLeft; 
}else if (xGapRight < 0) { //using else if because if it is a scale issue it will 
//be too far right & too far left, meaning both are true and using transform will 
//just shift it right then left and you are worse off than before, using 
//set.transform(scale) works great on dataline but when using on datapoints scales 
// symbol radius not placement 
    if (xGapLeft < 0 && xGapRight < xGapLeft) { xGapRight = xGapLeft; } 
//in this case the initial point is right of y-axis, the end point is right of 
//x-axis termination, and the difference between last point/axis is greater than 
//difference between first point/axis 

    datapoints.transform('t' +xGapRight +',0'); 
    datalines.transform('t' +xGapRight +',0'); 
    xGap = xGapRight; 
} 
rehookHoverOverEvent(xGap); //there are so many ways to do this just leaving it 
//here as a call to do so, if you don't the hover tags will be over the original 
//datapoints instead of the new location, at least they were in my case. 

Answer 3

안녕하세요이 댓글이 경우 : g.line.js에서

 if (valuesy[i].length > width - 2 * gutter) { 
      valuesy[i] = shrink(valuesy[i], width - 2 * gutter); 
      len = width - 2 * gutter; 
     } 

     if (valuesx[i] && valuesx[i].length > width - 2 * gutter) { 
      valuesx[i] = shrink(valuesx[i], width - 2 * gutter); 
     } 

를, 그것은 문제를 해결하는 것, 또한 y 축의 값과 유사한 문제를 해결합니다.

Answer 4

v0.50에서 v0.51로 업그레이드하면 문제가 해결되었습니다.