要使用C#實現自定義Dashboard,你可以創建一個Windows Forms應用程序或者一個ASP.NET Core Web應用程序
首先,打開Visual Studio并創建一個新的Windows Forms應用程序項目。
在解決方案資源管理器中,右鍵單擊項目名稱,然后選擇“管理NuGet包”。安裝以下NuGet包:
打開“Form1.cs”文件,然后添加以下命名空間引用:
using LiveCharts;
using LiveCharts.Wpf;
public partial class Form1 : Form
{
private CartesianChart chart;
public Form1()
{
InitializeComponent();
chart = new CartesianChart
{
Dock = DockStyle.Fill,
Location = new System.Drawing.Point(0, 0),
Name = "chart",
Size = new System.Drawing.Size(800, 450),
TabIndex = 0,
Text = "cartesianChart1"
};
this.Controls.Add(chart);
}
}
private void LoadData()
{
var data = new ChartValues<double> { 5, 7, 8, 6, 5, 3, 9, 10 };
var series = new LineSeries
{
Values = data,
Stroke = Brushes.SteelBlue,
Fill = Brushes.Transparent,
StrokeThickness = 2,
PointGeometry = null
};
chart.Series.Add(series);
chart.AxisX.Add(new Axis { IsEnabled = false });
chart.AxisY.Add(new Axis { IsEnabled = false });
}
private void Form1_Load(object sender, EventArgs e)
{
LoadData();
}
現在,當你運行應用程序時,你應該能看到一個簡單的折線圖作為Dashboard的一部分。你可以根據需要修改數據和圖表樣式。
如果你想創建一個ASP.NET Core Web應用程序,你可以使用Blazor或者Razor Pages技術。在這種情況下,你可以使用JavaScript庫(如Chart.js、Highcharts等)來創建圖表。你還可以使用C#庫(如Blazorise、Radzen等)來創建圖表。這里是一個使用Blazor和Chart.js的簡單示例:
打開Visual Studio并創建一個新的ASP.NET Core Web應用程序項目。選擇“Blazor Server App”模板。
在wwwroot文件夾中,創建一個名為“lib”的新文件夾。下載Chart.js庫并將其放入此文件夾中。
在wwwroot/index.html(或wwwroot/_Host.cshtml,如果你使用的是Razor Pages)文件中,添加對Chart.js庫的引用:
@page "/dashboard"<canvas id="myChart" width="400" height="200"></canvas>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JavaScript.InvokeVoidAsync("drawChart");
}
}
}
window.drawChart = () => {
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3, 7],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
};
現在,當你運行應用程序并導航到/dashboard時,你應該能看到一個簡單的折線圖作為Dashboard的一部分。你可以根據需要修改數據和圖表樣式。