Blazor WASM] Google Chart 그리기

소스링크 : https://github.com/BigExecution/BlazorWASM.git

Blazor WebAssembly 앱 생성 시,

자동으로 세팅되는 Weather forecast 페이지 하단에 날짜별 온도를 나타내는 구글차트를 추가해보자.

1. index.html 파일에 google chart 스크립트 태그 추가 

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

2. graph.js 파일 추가 

function setGrowthGraph(data) {
    var dt = new google.visualization.DataTable();
    dt.addColumn('string', 'Date');
    dt.addColumn('number', 'Temp. (C)');
    dt.addColumn('number', 'Temp. (F)');

    dt.addRows([
        ...data
    ]);

    // pointVisible, pointSize로 라인 차트에 동그라미 표시합니다.
    // Set chart options
    var options = {
        'title': '',
        pointsVisible: true,
        pointSize: '11px',
        legend: 'none',
        colors: ['#F2994A', '#5DB682']
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(dt, options);
}

export function drawGrowthGraph(data) {
    google.charts.setOnLoadCallback(setGrowthGraph(data))
}

3. FetchData.razor에 그래프를 표시할 div 태그 추가 

    <div id="chart_div" style="height: 320px;"></div>

4. FetchData.razor C# 코드로 graph.js 파일의 drawGrowthGraph 함수를 호출하고 날씨 데이터를 전달하기

@code {
    private WeatherForecast[] forecasts;
    private Task<IJSObjectReference> _moduleGraph;
    private Task<IJSObjectReference> ModuleGraph => _moduleGraph ??= _js.InvokeAsync<IJSObjectReference>("import", "./js/graph.js").AsTask();

    protected override async Task OnInitializedAsync()
    {
        Http.BaseAddress = new Uri(NavigationManager.BaseUri);
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("/sample-data/weather.json");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var moduleGraph = await ModuleGraph;

        ArrayList points = new ArrayList();
        foreach (var item in forecasts)
        {

            object[] array1 = new object[] { item.Date.ToShortDateString(), item.TemperatureC, item.TemperatureF };
            points.Add(array1);
        }
        await moduleGraph.InvokeVoidAsync("drawGrowthGraph", points);

    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}