Scatter Series Google 차트에 맞춤 다각형을 그리는 방법은 무엇입니까?

여기에 표시된 것과 같은 일련의 점이있는 Scatter Series가 있습니다. https://developers.google.com/chart/interactive/docs/gallery/scatterchart Scatter Series Google 차트에 맞춤 다각형을 그리는 방법은 무엇입니까?

포인트는 그룹화되며 각 그룹은 다른 색상으로 표시됩니다. 나는 각 그룹 (convex hull) 주위에 다각형을 그려 넣고 싶다. n 경계점이있는 다각형을 차트에 추가하는 간단한 방법이없는 것처럼 보입니다. 당신이 경계 지점을 찾을 수있는 알고리즘이있는 경우

출처

2017-12-19 Prabu Arumugam

는
당신은 사용자 정의 기본 유형
사용 옵션 series을 설정 분산 및 라인 시리즈 ...
사용 옵션 seriesType 모두를 그릴 수있는 ComboChart을 사용할 수 있습니다
가 사용되는 알고리즘에서 가져온 된 특정 시리즈의 형태는 다음 작업 조각에

->Convex Hull | Set 1 (Jarvis’s Algorithm or Wrapping)
(Java 버전에서 변환)

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var groupA = [ 
 
    [0,3],[2,3],[1,1],[2,1],[3,0],[0,0],[3,3],[2,2] 
 
    ]; 
 

 
    var groupB = [ 
 
    [11,11],[12,12],[12,10],[12,14],[13,13],[14,12],[15,12],[16,12] 
 
    ]; 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'x'); 
 
    data.addColumn('number', 'y'); 
 
    data.addRows(groupA); 
 
    data.addRows(groupB); 
 

 
    addGroup('A', data, groupA) 
 
    addGroup('B', data, groupB) 
 

 
    var options = { 
 
    chartArea: { 
 
     bottom: 48, 
 
     height: '100%', 
 
     left: 36, 
 
     right: 24, 
 
     top: 36, 
 
     width: '100%' 
 
    }, 
 
    height: '100%', 
 
    seriesType: 'line', 
 
    series: { 
 
     0: { 
 
     type: 'scatter' 
 
     } 
 
    }, 
 
    width: '100%' 
 
    }; 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 

 
    drawChart(); 
 
    window.addEventListener('resize', drawChart, false); 
 

 
    function drawChart() { 
 
    chart.draw(data, options); 
 
    } 
 

 
    function addGroup(group, dataTable, points) { 
 
    var polygon = convexHull(points); 
 
    var colIndex = dataTable.addColumn('number', group); 
 
    for (var i = 0; i < polygon.length; i++) { 
 
     var rowIndex = dataTable.addRow(); 
 
     dataTable.setValue(rowIndex, 0, polygon[i][0]); 
 
     dataTable.setValue(rowIndex, colIndex, polygon[i][1]); 
 
    } 
 
    } 
 

 
    function orientation(p, q, r) { 
 
    var val = (q[1] - p[1]) * (r[0] - q[0]) - 
 
       (q[0] - p[0]) * (r[1] - q[1]); 
 

 
    if (val == 0) { 
 
     return 0; // collinear 
 
    } else if (val > 0) { 
 
     return 1; // clock wise 
 
    } else { 
 
     return 2; // counterclock wise 
 
    } 
 
    } 
 

 
    function convexHull(points) { 
 
    // must be at least 3 rows 
 
    if (points.length < 3) { 
 
     return; 
 
    } 
 

 
    // init 
 
    var l = 0; 
 
    var p = l; 
 
    var q; 
 
    var hull = []; 
 

 
    // find leftmost point 
 
    for (var i = 1; i < points.length; i++) { 
 
     if (points[i][0] < points[l][0]) { 
 
     l = i; 
 
     } 
 
    } 
 

 
    // move counterclockwise until start is reached 
 
    do { 
 
     // add current point to result 
 
     hull.push(points[p]); 
 

 
     // check orientation (p, x, q) of each point 
 
     q = (p + 1) % points.length; 
 
     for (var i = 0; i < points.length; i++) { 
 
     if (orientation(points[p], points[i], points[q]) === 2) { 
 
      q = i; 
 
     } 
 
     } 
 

 
     // set p as q for next iteration 
 
     p = q; 
 
    } while (p !== l); 
 

 
    // add back first hull point to complete line 
 
    hull.push(hull[0]); 
 

 
    // set return value 
 
    return hull; 
 
    } 
 
});

html, body, #chart_div { 
 
    height: 100%; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

출처

2017-12-19 16:26:10 WhiteHat

Scatter Series Google 차트에 맞춤 다각형을 그리는 방법은 무엇입니까?

답변

관련 문제