2025年7月29日 星期二

[研究]ASP.NET WebForm網站 Highcharts 12.3.0 套件試用

[研究]ASP.NET WebForm網站 Highcharts 12.3.0 套件試用

2025-07-29

  • Highcharts 是一套用 JavaScript 撰寫的互動式圖表庫，支援多種圖表類型（折線圖、長條圖、圓餅圖、雷達圖等）。
  • 它有豐富的客製化選項與動畫效果，支援響應式設計（手機/桌面自適應）。
  • 採用純前端繪圖（SVG / VML），無需安裝外部軟體。
  • 免費用於非商業用途，商業使用需購買授權。

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

********************************************************************************

Default.aspx

<%@ 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 src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Literal ID="ltChartScript" runat="server"></asp:Literal>
            <div id="chartContainer" style="width: 600px; height: 400px; margin: 0 auto"></div>
        </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // 模擬資料，可以換成從資料庫讀取
            string categories = "[ '一月', '二月', '三月', '四月', '五月', '六月' ]";
            string data = "[29.9, 71.5, 106.4, 129.2, 144.0, 176.0]";

            // 組成 Highcharts 初始化 JavaScript
            string script = $@"
        <script type='text/javascript'>
            document.addEventListener('DOMContentLoaded', function () {{
                Highcharts.chart('chartContainer', {{
                    chart: {{ type: 'line' }},
                    title: {{ text: '每月銷售量' }},
                    xAxis: {{
                        categories: {categories}
                    }},
                    yAxis: {{
                        title: {{
                            text: '銷售量 (單位)'
                        }}
                    }},
                    series: [{{
                        name: '銷售量',
                        data: {data}
                    }}]
                }});
            }});
        </script>";

            ltChartScript.Text = script;
        }
    }
}






下圖，執行結果

********************************************************************************
補充
下圖，輸入  Highcharts 會有一堆

下圖，要輸入 Highsoft.Highcharts 才對，目前 NuGet 最新提供到 11.4.6.5版


WebApplication1

正在安裝:

Newtonsoft.Json.13.0.3
Highsoft.Highcharts.11.4.6.5


********************************************************************************
補充
Highcharts 與其他類似圖表元件比較





元件
優點
缺點






Highcharts
- 功能強大且支援多種圖表類型- 互動性佳，動畫流暢- 文件豐富，社群活躍- 支援響應式與手機友好
- 商業用途需付費授權- JavaScript庫較大，對頁面載入有影響- 有時自訂化較複雜




Chart.js
- 開源免費- 輕量級、簡單易用- 支援動畫和響應式設計
- 功能相對少- 不支援某些複雜圖表類型- 擴展性有限




Google Charts
- 免費且整合Google生態- 易於使用與嵌入- 支援多種圖表與互動
- 需連線Google服務- 自訂化不如Highcharts靈活- 需注意隱私與政策




FusionCharts
- 功能完整、商業支援良好- 多平台支援（包括伺服器端）
- 商業授權昂貴- 相較Highcharts，學習曲線稍陡峭




D3.js
- 最強大的資料視覺化函式庫- 完全自由自訂圖表與互動
- 開發門檻高- 需要深入JavaScript知識- 不適合快速上手




(完)
相關


x













於




















沒有留言:
















張貼留言