Blazor 에서 구글 차트를 사용하는 방법

 

조직도  |  Charts  |  Google for Developers

구글 차트에서 제공하는 형태 중 사용하는 방법입니다. 차트 중 조직도를 사용한 예시입니다.

 

목차

1. 프로젝트 생성

2. graph.js 작성

3. _Layout.cshtml 작성

4. Index.razor 작성

5. 완성

 

 

1. 프로젝트 생성

Blazor server를 새 프로젝트로 생성했을 때 세팅 되어있는 기본 웹페이지 환경에서 작업을 하겠습니다.

 

 

2. graph.js 작성

wwwroot 폴더에 graph.js 자바스크립트 파일을 생성하고 아래 내용을 작성합니다.

 

graph.js 

 
export function drawChart(data) {
    var dt = new google.visualization.DataTable();
    dt.addColumn('string', 'Name');
    dt.addColumn('string', 'Manager');
 
    for (var i = 0; i < data.length; i++) {
        dt.addRow(data[i]);
    }
 
    // Create the chart.
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    // Draw the chart, setting the allowHtml option to true for the tooltips.
    chart.draw(dt, { 'allowHtml': true });
}

(구글 조직도 차트에서 가장 기본적인 것들만 남기고 가져왔습니다.)

 

 

3. _Layout.cshtml 작성

_Layout.cshtml 에서 구글 차트를 로드하는 태그를 작성합니다.

 

구글 차트 로드

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        google.charts.load('current', { packages: ['orgchart'] });
    </script>

 

 

4. Index.razor 작성

Index.razor 에서 차트에서 사용 될 데이터를 생성하고 자바스크립트 함수를 호출하여 차트를 그리라는 코드를 작성합니다.

 

Index.razor

@page "/"
@using System.Collections
@inject IJSRuntime JSRuntime
 
<PageTitle>Index</PageTitle>
 
<div id="chart_div"></div>
 
@code {
 
    Task<IJSObjectReference> moduleGraph;
    Task<IJSObjectReference> ModuleGraph => moduleGraph ??= JSRuntime.InvokeAsync<IJSObjectReference>("import", "./graph.js").AsTask();
 
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var _moduleGraph = await ModuleGraph;
 
            ArrayList arrayList = new ArrayList();
            object[] array1 = new object[] { "Root", "" };
            object[] array2 = new object[] { "Child", "Root" };
            object[] array3 = new object[] { "Child Child", "Child" };
            object[] array4 = new object[] { "Child Child2", "Child" };
            object[] array5 = new object[] { "Child2", "Root" };
            arrayList.Add(array1);
            arrayList.Add(array2);
            arrayList.Add(array3);
            arrayList.Add(array4);
            arrayList.Add(array5);
 
            await _moduleGraph.InvokeVoidAsync("drawChart", arrayList);
        }
    }
}

 

 

5. 완성

완성!