맞춤법 검사에서 바 그래프의 배경을 사용자 정의했습니다.

Question

SVG 및 RAPHAEL javaScript에 새로운 기능이 있습니다.

나는 막대 그래프에 RAPHAEL을 사용하여 막대 그래프를 만듭니다. 막대 그래프에는 배경이 "박리"되어 있습니다. 이제 막대 그래프가 "SVG"의 "경로"에 렌더링됩니다. 정확한 모양과 느낌을 얻으려면 두 가지 방법이 있습니다.

1) 경로의 배경을 코딩해야합니다. 또는 2) 경로를 반복해야하는 배경 이미지를 제공해야합니다.

첫 번째 접근법을 코딩 할 수 없었습니다.

그래서, 여기 내 두 번째 방법입니다 :

"R1"막대 그래프가 $에서 ("#의 first_graph을")가 생성되고있다. 나는 막대 그래프의 배경을 사용자 정의하고 싶다. 그래프 영역을 담당하고 배경 fron 패턴을 설정하는 경로를 선택했다.

스크립트 부분 :

r1.hbarchart (0, 0, 650, 90, [base_array_1, calc_array_1] {색상 : 적층 [ "#의 278bd1", "#의 052f4d"] : TRUE}). 공중 선회 (지느러미, 약력); . ATTR ({ 채우기 : "URL (#image)",

}) :

$ ("#의 first_graph은") ("홀수 경로")을 찾을 수 있습니다.; HTML에서 선언

패턴 부 .... :

<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<defs> 

<pattern id='image' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none"> 
<image xlink:href="../images/sub_chart_blue_bg.png" width="100" height="100" preserveAspectRatio="none"></image> 
     </pattern> 
     </defs> 
    </svg> 

지금, (두 번째 방법)에 직면하는 문제 ... 스피 점이다

가 화상 stratched되고있다.

나는 그래프 (경로의 svg)의 박탈 배경을 만들 수있는 하나의 승인을 제공하여 나를 도와 주시기 바랍니다.

Answer 1

다음은 수행 방법입니다. 네가 왜 작동하지 않는지 잘 모르겠다.

그래서 이 박탈 된 배경 이미지 "어떤 사람이 나를 만드는 데 도움이 될 수 있습니다"귀하의 질문에 대답 "경로의을." 그것은 아마 크거나 큰 해상도를 가지고 있기 때문에 이미지가 뻗어 가져옵니다 DEMO

var p = Raphael('notepad',500,500); 
var pad = p.path("M25.221,1.417H6.11c-0.865,0-1.566,0.702-1.566,1.566v25.313c0,0.865,0.701,1.565,1.566,1.565h19.111c0.865,0,1.565-0.7,1.565-1.565V2.984C26.787,2.119,26.087,1.417,25.221,1.417zM15.666,29.299c-0.346,0-0.626-0.279-0.626-0.625s0.281-0.627,0.626-0.627c0.346,0,0.627,0.281,0.627,0.627S16.012,29.299,15.666,29.299zM24.376,26.855c0,0.174-0.142,0.312-0.313,0.312H7.27c-0.173,0-0.313-0.142-0.313-0.312V4.3c0-0.173,0.14-0.313,0.313-0.313h16.792c0.172,0,0.312,0.14,0.312,0.313L24.376,26.855L24.376,26.855z"); 

pad.transform("t200,200"); 
pad.scale(10); 
pad.attr({fill:'url("http://www.zingerbug.com/Backgrounds/background_images/gray_diagonal_stripes_seamless_background_pattern.jpg")'}); 

봐. 원본에 가깝게 만들려면 경로 크기에 따라 이미지의 크기를 조정 한 다음 배경으로 사용해야합니다. 나는 그것이 당신의 문제를 해결해야한다고 생각합니다.