Open2
Blazor ApexChartsを使う
だぼあープロジェクト作る
PS D:\dashboard> dotnet new blazorwasm -f net6.0
テンプレート "Blazor WebAssembly App" が正常に作成されました。
このテンプレートには、Microsoft 以外のパーティのテクノロジーが含まれています。詳しくは、https://aka.ms/aspnetcore/6.0-third-party-notices をご覧ください。
作成後の操作を処理しています...
D:\dashboard\dashboard.csproj を復元しています:
復元対象のプロジェクトを決定しています...
D:\dashboard\dashboard.csproj を復元しました (12.64 sec)。
正常に復元されました。
Blazor ApexCharts入れる
PS D:\dashboard> dotnet add package Blazor-ApexCharts --version 1.3.0
復元対象のプロジェクトを決定しています...
Writing C:\Users\xxxxx\AppData\Local\Temp\tmpE9C9.tmp
info : X.509 certificate chain validation will use the default trust store selected by .NET for code signing.
info : X.509 certificate chain validation will use the default trust store selected by .NET for timestamping.
info : パッケージ 'Blazor-ApexCharts' の PackageReference をプロジェクト 'D:\dashboard\dashboard.csproj' に追加しています。
info : D:\dashboard\dashboard.csproj のパッケージを復元しています...
info : GET https://api.nuget.org/v3-flatcontainer/blazor-apexcharts/index.json
info : OK https://api.nuget.org/v3-flatcontainer/blazor-apexcharts/index.json 1055 ミリ秒
info : GET https://api.nuget.org/v3-flatcontainer/blazor-apexcharts/1.3.0/blazor-apexcharts.1.3.0.nupkg
info : OK https://api.nuget.org/v3-flatcontainer/blazor-apexcharts/1.3.0/blazor-apexcharts.1.3.0.nupkg 915 ミリ秒
info : CACHE https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components/index.json
info : GET https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components/6.0.3/microsoft.aspnetcore.components.6.0.3.nupkg
info : CACHE https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components.web/index.json
info : GET https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components.web/6.0.3/microsoft.aspnetcore.components.web.6.0.3.nupkg
info : OK https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components/6.0.3/microsoft.aspnetcore.components.6.0.3.nupkg 8 ミリ秒
info : CACHE https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components.analyzers/index.json
info : GET https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components.analyzers/6.0.3/microsoft.aspnetcore.components.analyzers.6.0.3.nupkg
info : CACHE https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.authorization/index.json
info : GET https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.authorization/6.0.3/microsoft.aspnetcore.authorization.6.0.3.nupkg
info : OK https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components.web/6.0.3/microsoft.aspnetcore.components.web.6.0.3.nupkg 20 ミリ秒
info : CACHE https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components.forms/index.json
info : GET https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components.forms/6.0.3/microsoft.aspnetcore.components.forms.6.0.3.nupkg
info : CACHE https://api.nuget.org/v3-flatcontainer/microsoft.jsinterop/index.json
info : GET https://api.nuget.org/v3-flatcontainer/microsoft.jsinterop/6.0.3/microsoft.jsinterop.6.0.3.nupkg
info : OK https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components.analyzers/6.0.3/microsoft.aspnetcore.components.analyzers.6.0.3.nupkg 14 ミリ秒
info : GET https://api.nuget.org/v3-flatcontainer/system.io.pipelines/index.json
info : OK https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.authorization/6.0.3/microsoft.aspnetcore.authorization.6.0.3.nupkg 20 ミリ秒
info : OK https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.components.forms/6.0.3/microsoft.aspnetcore.components.forms.6.0.3.nupkg 13 ミリ秒
info : OK https://api.nuget.org/v3-flatcontainer/microsoft.jsinterop/6.0.3/microsoft.jsinterop.6.0.3.nupkg 21 ミリ秒
info : CACHE https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.metadata/index.json
info : GET https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.metadata/6.0.3/microsoft.aspnetcore.metadata.6.0.3.nupkg
info : CACHE https://api.nuget.org/v3-flatcontainer/microsoft.extensions.logging.abstractions/index.json
info : GET https://api.nuget.org/v3-flatcontainer/microsoft.extensions.logging.abstractions/6.0.1/microsoft.extensions.logging.abstractions.6.0.1.nupkg
info : OK https://api.nuget.org/v3-flatcontainer/microsoft.aspnetcore.metadata/6.0.3/microsoft.aspnetcore.metadata.6.0.3.nupkg 8 ミリ秒
info : OK https://api.nuget.org/v3-flatcontainer/microsoft.extensions.logging.abstractions/6.0.1/microsoft.extensions.logging.abstractions.6.0.1.nupkg 8 ミリ秒
info : OK https://api.nuget.org/v3-flatcontainer/system.io.pipelines/index.json 922 ミリ秒
info : GET https://api.nuget.org/v3-flatcontainer/system.io.pipelines/6.0.2/system.io.pipelines.6.0.2.nupkg
info : OK https://api.nuget.org/v3-flatcontainer/system.io.pipelines/6.0.2/system.io.pipelines.6.0.2.nupkg 8 ミリ秒
info : コンテンツ ハッシュ 3QCDEyxcjhfQQeGRGtJFP4F8ne4D6Gf2w1nkdQCRy79yzSGHcoUbBkziVVmoppRbipIh9ickyHD7wXB+m0GiIw== の https://api.nuget.org/v3/index.json から Microsoft.JSInterop 6.0.3 がインストールされました。
info : コンテンツ ハッシュ zM6GIzF9bAnjVhiXNFQ2viF7W9FPASHjiDmV53M+ArRKBS8LFvzTfC4sgGYDoaikxm+zdx9mH7x98I1Dh3/INQ== の https://api.nuget.org/v3/index.json から Microsoft.AspNetCore.Components.Analyzers 6.0.3 がインストールされました。
info : コンテンツ ハッシュ bSGNnkAAzalMJl3Kv4HIOZ2sVeIc/+UopY27fO8v5Km9mS3jMzDiuCdvi4pXgnSsJj/bFjjO5KASd/KB9feFkw== の https://api.nuget.org/v3/index.json から Microsoft.AspNetCore.Components.Forms 6.0.3 がインストールされました。
info : コンテンツ ハッシュ Mqk/tAA+RWBnaz8uhn18VaEqVIY/G6LTpBX+Ap65/3vq4RwFZIDFK8gYMrV3JSQXkBYk3rYxPtwgEutCt4ZGww== の https://api.nuget.org/v3/index.json から Microsoft.AspNetCore.Components 6.0.3 がインストールされました。
info : コンテンツ ハッシュ otsm2nj+nFPI1rGENDkbbDWWsdn4VKMa3nY6crAMzgXESIiaT0iLSWN3cC3yCUIarTsNJOz4nhT+z6/lkiqKEQ== の https://api.nuget.org/v3/index.json から Microsoft.AspNetCore.Components.Web 6.0.3 がインストールされました。
info : コンテンツ ハッシュ I3FVSfaLdSLs4XmBq5DbK7PuVF/aSf0Xc63/AeNIJFt6/chYvcJaxnKbd4yZo9OXGw5OT9KOIxGWZ/2CucvgJw== の https://api.nuget.org/v3/index.json から Microsoft.AspNetCore.Metadata 6.0.3 がインストールされました。
info : コンテンツ ハッシュ eWgsWE7IY7Az2lGBvoYk20290ZqTI0Y9ATyprrwfaC7w8MvBXu2jU+tv90Zt6lbEE3RP55XL+dFydGExcunHbw== の https://api.nuget.org/v3/index.json から Microsoft.AspNetCore.Authorization 6.0.3 がインストールされました。
info : コンテンツ ハッシュ cb5OfQjnz+zjpJJei+f3QYK7+wWZrDdNHf3DykO6QCacpNZ80tuNgq1DC2kqlrjfEu+cMUTvulxPIrCMbBkjqg== の https://api.nuget.org/v3/index.json から System.IO.Pipelines 6.0.2 がインストールされました。
info : コンテンツ ハッシュ 4JjpSm/gR9nqI9EMhBU+mnlY4vG0KCEAoL7vGKnhsADaIgall65uF9R2Ke+5LuJO9hIERDB26sN02uY9QMf+NA== の https://api.nuget.org/v3/index.json から Blazor-ApexCharts 1.3.0 がインストールされました。
info : コンテンツ ハッシュ dzB2Cgg+JmrouhjkcQGzSFjjvpwlq353i8oBQO2GWNjCXSzhbtBRUf28HSauWe7eib3wYOdb3tItdjRwAdwCSg== の https://api.nuget.org/v3/index.json から Microsoft.Extensions.Logging.Abstractions 6.0.1 がインストールされました。
info : パッケージ 'Blazor-ApexCharts' は、プロジェクト 'D:\dashboard\dashboard.csproj' のすべての指定されたフレームワークとの互換性があります。
info : ファイル 'D:\dashboard\dashboard.csproj' に追加されたパッケージ 'Blazor-ApexCharts' バージョン '1.3.0' の PackageReference。
info : MSBuild ファイル D:\dashboard\obj\dashboard.csproj.nuget.g.props を生成しています。
info : アセット ファイルをディスクに書き込んでいます。パス: D:\dashboard\obj\project.assets.json
log : D:\dashboard\dashboard.csproj を復元しました (3.35 sec)。
Assets
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>dashboard</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="dashboard.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
+ <script src="_content/Blazor-ApexCharts/js/apex-charts.min.js"></script>
+ <script src="_content/Blazor-ApexCharts/js/blazor-apex-charts.js"></script>
</body>
</html>
Imports
Imports.razor
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using dashboard
@using dashboard.Shared
+@using ApexCharts
使い方
FetchData.razor
@page "/fetchdata"
@inject HttpClient Http
<PageTitle>Weather forecast</PageTitle>
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
+ <ApexChart TItem="WeatherForecast" Title="気温">
+ <ApexPointSeries TItem="WeatherForecast"
+ Items="forecasts"
+ Name="気温[℃]"
+ SeriesType="SeriesType.Line"
+ XValue="@(e => e.Date.ToString("yyyy/MM/dd"))"
+ YValue="@(e => e.TemperatureC)"
+ OrderBy="e=>e.X" />
+ <ApexPointSeries TItem="WeatherForecast"
+ Items="forecasts"
+ Name="気温[F]"
+ SeriesType="SeriesType.Bar"
+ XValue="@(e => e.Date.ToString("yyyy/MM/dd"))"
+ YValue="@(e => e.TemperatureF)"
+ OrderBy="e=>e.X"
+ ShowDataLabels />
+ </ApexChart>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
}
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);
}
}
表示例
だぼあー参考
GitHub
DEMO