그래프 문서, 최근 샘플 등

Question

Raphael SVG 라이브러리의 그래픽 확장 인 gRaphael을 사용하는 라이브 업데이트 라인 그래프의 구현 작업 중입니다.

거의 실시간으로 업데이트하는 프로젝트로 이것을하는 누군가의 사례를 찾을 수없는 것 같습니다. 괜찮습니다. 그래프에 새 데이터 세트를 새로 고침하는 방법이 있다고 가정합니다. (매번 새로운 전체 Raphael 객체를 다시 초기화 할 필요가 없습니다!) 그러나 여기에 문제가 있습니다.

어디에서나 정확한 문서로 보인다. 이 StackOverflow 질문 : Graphael line chart 발견이 차례로이 설명서 프로젝트 : https://github.com/kennyshen/g.raphael/tree/master/docs,하지만 결과가 추웠습니다. 제공된 예를 사용하여, 나는 몇 가지 오류로 실행 : (r은 라파엘 객체이며, 내가 g이 내 gRaphael 속성 가정 곳)

1. 예제에 사용되는 구문 r.g.linechart()가 더 이상 유효하지 않습니다. 어딘가에있는 누군가가 Raphael 객체를 적절하게 확장하여 r.linechart()이 작동하도록 전환해야합니다.

2. linechart()에 전달 된 매개 변수가 잘못되어 결과가 정의되지 않은 오류가 다시 발생합니다. #x, #y, width, height, arrayX, arrayY 매개 변수 만 전달하고 차트 레이블 등을 떨어 뜨린다면 평범한 선을 그릴 수 있습니다. 그러나 물론 내가하는 API 문서없이 라이브러리가 좋은 사람 많은 일을하지 않을 말하는 등, 전설을 내 축 라벨을 제공 할 수

것도 필요하지만, 탄탄한있다 거기서 코드 자체를 읽는 것에 엄격히 기반하여 배울 의사가있는 사람들이 있습니다. 나는 그 중 하나가 아니야. 가급적이면 라이브 업데이트를 사용하여 잘 주석 처리 된 예제를 사용하면 좋습니다.

는

1. 아무도 내가 연결된 것보다 더 좋은 문서를 알고 있나요 :

   그래서 나는 질문이 됐을까?

2. 예를 들어 설명하지 못하는 사람이 있습니까?
3. 누군가 linechart()에서 허용하는 매개 변수의 적절한 항목을 제공 할 수 있습니까?

고마워요! fork in GitHub that is working on the documentation and examples.

당신은 download 코드에 필요하면 컴퓨터에서 볼 것입니다

var r = Raphael('line-chart'); 

// did NOT work --> 
var linechart = r.g.linechart(
    10,10,300,220,[1,2,3,4,5],[10,20,15,35,30], 
    {"colors":["#444"], "symbol":"s", axis:"0 0 1 1"} 
); 

// worked in a limited way, rendering a plain line with no visible labels/graph --> 
var linechart = r.linechart(
    10,10,300,220,[1,2,3,4,5],[10,20,15,35,30] 
); 

Answer 1

: 공식적으로

, 여기에 내가 지금까지 얼마나 멀어요. 진행중인 작업이지만 공식 g.Raphael 페이지에서 찾을 수있는 것 이상입니다.

나는 또한 this 작은 게시물과 몇 가지 예를 발견했습니다.

Answer 2

나는 여전히 라파엘을 배우려고 노력하고 있지만, 내가 사용해온 주요한 자원은 다음과 같다 : http://g.raphaeljs.com/reference.html 그리고 "g.http://jsfiddle.net/kcar/mHG2q/이

그냥 메모, 내가 때까지 공부를 시작하지 않았다 "여기

거의 녹아웃/gRaphael, 확률값하지 최고의 솔루션,하지만 아이디어와 함께 업데이트 선 차트를 끌어 바이올린입니다 . 나는, 그래서 바이올린으로 연주하고 일을 변경하는 방법을 참조하십시오 (오류의 많은) 시험/오류와 함께 읽는

를 결합하지만위한 기본 코드는 같은 수 있습니다 :

//constructor 
var lines = r.linechart(10, 10, width, height, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }) 
    .hoverColumn(function() { //this function sets the hover tag effect 
     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 }); //this adjusts size of the point symbols