[研究][ASP.NET][HTML5+JavaScript] Chart.js 2.9.3繪圖套件 試用
2018-04-10官方網站
官方網站目前提供到 3.5.0 版，但 NuGet 只到 2.9.3 版，檢視 NuGet 提供版本的描述中的官方網站，確定是同一家。
Chart.js · Chart.js documentation (含一個長條圖範例)
http://www.chartjs.org/docs/latest/
Getting Started · Chart.js documentation
https://www.chartjs.org/docs/latest/getting-started/
Chart.js samples (各種範例)
http://www.chartjs.org/samples/latest/
Chart.js - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
https://cdnjs.com/libraries/Chart.js
環境：
Visual Studio 2019 + WebForm + ASP.NET + WebApplication + C#
http://www.chartjs.org/docs/latest/
Getting Started · Chart.js documentation
https://www.chartjs.org/docs/latest/getting-started/
Chart.js samples (各種範例)
http://www.chartjs.org/samples/latest/
Chart.js - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
https://cdnjs.com/libraries/Chart.js
環境：
Visual Studio 2019 + WebForm + ASP.NET + WebApplication + C#
參考這篇範例
http://www.chartjs.org/docs/latest/
(下圖) 預設畫面非常大，調整瀏覽器寬度，高度會自動調整，可用 div 的 width 限制一下範圍。
Default.aspx
xxx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="Scripts/Chart.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="aa" style="width:600px">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</form>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
|
(完)
沒有留言:
張貼留言