2021年8月15日 星期日

[研究][ASP.NET][HTML5+JavaScript] Chart.js 2.9.3繪圖套件 試用

[研究][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/


(下圖) 預設畫面非常大，調整瀏覽器寬度，高度會自動調整，可用 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>


(完)


於

沒有留言:

張貼留言