網頁與圖表 -- Google Chart #2 (JavaScript與後置程式碼）

2017 iT 邦幫忙鐵人賽

DAY 28

Modern Web

ASP.NET (Web Form)快速入門，全程Youtube影片教學系列第 28 篇

google chart asp.net web form 網頁圖表

mis2000lab

2017-01-02 08:19:22

8618 瀏覽

分享至

上一篇文章瞭解 Google Chart之後 ( http://ithelp.ithome.com.tw/articles/10188227 )

現在我們想要在「後端」搭配資料庫產生「真實的數據」，
透過Google Chart在「前端」展示圖表

但是， JavaScript寫在HTML畫面上，該如何與 AP.NET後置程式碼搭配呢？

您可以參考：ClientScriptManager類別 http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx

我透過 Youtube教學影片，比較好解說 -- https://youtu.be/or8tibRKams

HTML畫面

<!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>ASP.NET如何搭配「Google Charts」的JavaScript</title>
 
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 
    //============================================================
    //  這裡全部消失了，寫去「後置程式碼」
    //============================================================
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />本範例 JavaScript碼沿用範例 Google_Chart_00.aspx<br /><br /> 
            <hr />
            <!--Div that will hold the pie chart-->
            <div id="chart_div"></div> 
    </div>
    </form>
</body>
</html>

後置程式碼：

    protected void Page_Load(object sender, EventArgs e)
    {
         //** 資料來源  http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx
 
        // Define the name and type of the client scripts on the page.
        String csname1 = "Script1";
        String csname2 = "Script2";
        Type cstype = this.GetType();
 
        // Get a ClientScriptManager reference from the Page class.
        ClientScriptManager cs = Page.ClientScript;
 
        // Check to see if the startup script is already registered.
        // 呼叫 IsStartupScriptRegistered 方法，判斷特定索引鍵和型別組的啟始指令碼是否已註冊，避免不必要的指令碼加入嘗試。
        if (!cs.IsStartupScriptRegistered(cstype, csname1))
        {
            String cstext1 = "google.load('visualization', '1.0', { 'packages': ['corechart'] });";
            cstext1 += "google.setOnLoadCallback(drawChart);";
 
            cs.RegisterStartupScript(cstype, csname1, cstext1, true);
            // 使用 addScriptTags (最後一個)參數，指出 script 參數所提供的指令碼是否包裝在 <script> 項目區塊中。 
            // 最後一個參數 addScriptTags 設為 true，表示<script>指令碼標記會自動加入。
        }
 
        // Check to see if the client script is already registered.
        if (!cs.IsClientScriptBlockRegistered(cstype, csname2))
        {
            StringBuilder cstext2 = new StringBuilder();
            cstext2.Append("<script type=\"text/javascript\">  function drawChart() {");
            cstext2.Append("var data = new google.visualization.DataTable();");
            cstext2.Append("data.addColumn('string', 'Topping');");
            cstext2.Append("data.addColumn('number', 'Slices');");
            cstext2.Append("data.addRows([['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2]]);");
            cstext2.Append("var options = { 'title': '圖表的標題--How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 };");
            cstext2.Append("var chart = new google.visualization.PieChart(document.getElementById('chart_div'));");
            cstext2.Append("chart.draw(data, options);");
            cstext2.Append("}</script>");
 
            cs.RegisterClientScriptBlock(cstype, csname2, cstext2.ToString(), false);
        }
        // 在網頁上的 OnLoad 事件引發之前。 不保證指令碼區塊可以根據其所註冊的順序來輸出。 
        // 如果指令碼區塊的順序很重要，請使用 StringBuilder 物件，在單一字串中一起蒐集指令碼，
        // 然後在單一用戶端指令碼區塊中註冊所有的指令碼。
    }

如果您需完整的說明與程式碼
您可以參閱這篇文章
https://dotblogs.com.tw/mis2000lab/2015/12/22/google_chart_javascript_clientscriptmanager_20151222