以下是一个简单的示例，演示如何在 ASP.NET MVC WebPages 中使用 Chart.js 绘制一个折线图：
<!DOCTYPE html>
<html>
<head>
<title>Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2>Line Chart Example</h2>
<canvas id="lineChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('lineChart').getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Monthly Sales',
data: [12, 19, 3, 5, 2],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
在这个例子中，我们首先引入了 Chart.js 库。然后，使用 <canvas> 元素创建了一个画布，用于绘制图表。在 <script> 标签中，我们使用 JavaScript 初始化了一个折线图，并指定了一些示例数据。
请注意，这个例子是一个简单的静态示例。在实际应用中，你可能需要从服务器动态获取数据，然后在页面上生成相应的 JavaScript 代码以反映这些数据。你可以通过使用 Razor 语法在服务器端生成 JavaScript 代码，将服务器端的数据传递到客户端脚本中。
如果需要更高级的图表功能或更大的定制性，你可能还需要考虑使用其他图表库，如 Highcharts、D3.js 等。这些库提供了更多的配置选项和图表类型，以满足不同的需求。
转载请注明出处：http://www.pingtaimeng.com/article/detail/14904/ASP.NET MVC