2016-06-16 3 views
1

네트워크 연결에 대한 내 사용자 정의 높은 차트에서 '['와 같은 곡선을 그립니다.Highcharts 일반 도면 매개 변수

enter image description here

// Arrow from Batik to SaaS client 
ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130, 'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135]) 

.attr({ 

    'stroke-width': 2, 
    stroke: colors[3] 

}) 
.add(); 

내가 매개 변수에 대한 도움을받을 수

http://www.highcharts.com/demo/renderer

아래의 그림과 같이

가 나는 반전 'L'곡선을 그리기위한 예를 얻었다. 다양한 조합으로 시도했지만 정확도 수준이 낮습니다.

+1

안녕하세요,이 경로와 비슷한 것을 얻으시겠습니까? http://jsfiddle.net/w0cujkbm/2/ 드로잉 경로에 대한 정보는 다음에서 볼 수 있습니다. http://api.highcharts.com/highcharts#Renderer.path –

+0

예. 친구, 곡면 모서리와 정확히 같습니다. 곡선 가장자리에 대한 정보가있는 경우 더 유용 할 것입니다. – Sasikumar

+1

커브 가장자리에 대한 정보는 여기에서 확인할 수 있습니다. https://www.w3.org/TR/SVG/paths.html#PathDataCurveCommands 여기에서 내가 작성한 하이 차트 예제를 볼 수 있습니다. http://jsfiddle.net/ w0cujkbm/4/ –

답변

2

당신은 Highcharts API 내부 곡선을 만드는 방법에 대한 정보를 찾을 수 있습니다 당신은 여기 곡선 가장자리를 만들기에 대한 모든 정보를 찾을 수 있습니다 http://api.highcharts.com/highcharts#Renderer.path

을 : 당신은 당신을 도울 수 코드를 찾을 수 있습니다 여기에 https://www.w3.org/TR/SVG/paths.html#PathDataCurveCommands

당신의 이 경로가 보일 수 있습니다 방법 예를

 $('#container').highcharts({}, function(chart) { 
    var ren = chart.renderer; 
    ren.path(['M', 235, 125, 'L', 200, 125, 'L', 200, 220, 'L', 235, 220, ]) 
     .attr({ 
     'stroke-width': 2, 
     stroke: 'blue' 

     }) 
     .add(); 
    }); 

차트 그리고 여기 당신은 찾을 수 있습니다 을

감사합니다.