愛招飛幫助手冊 愛招飛幫助手冊
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastWeb幫助主頁
  • 學習手冊

  • 開發手冊

    • 通訊協議

    • 互動輸出

      • 列印

      • 條碼

      • 圖表

        • Google圖表(WEB)
          • 1. 說明
          • 2. 設計明細
          • 3. 程式設計
            • 3.1. 程式初始設定
            • 3.2. 事件設定
          • 4. 運行結果
        • 甘特圖展示(WEB)
        • 商務月曆(WEB)
        • 時間線(WEB)
    • 媒體存取

    • 人工智慧

    • 實體運用

目录

Google圖表(WEB)

# FastWeb之Google圖表

  • 適用平臺:WEB(桌面)

# 1. 說明

  該範例使用GoogleChart的圖表實現圖表的繪製展示。可用該圖表實現較為豐富的定義操作。

  通過本範例學習,可以掌握UgFSGoogleChart的使用方法。

# 2. 設計明細

  開啟FastWeb設計器,分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

  ①:TUgPageControl元件,控制元件名稱為UgPageControl01。

  ②:TUgDataSource元件,控制元件名稱為UgDataSource01-UgDataSource07。

  ③:TUgDBGrid元件,控制元件名稱為UgDBGrid01-UgDBGrid07。

  ④:TUgRFDataSet元件,控制元件名稱為UgRFDataSet01-UgRFDataSet07。

  ⑤:TUgFSGoogleChart元件,控制元件名稱為UgFSGoogleChart01-UgFSGoogleChart07。

  ⑥:TUgRadioGroup元件,控制元件名稱為UgRadioGroup01-UgRadioGroup07。

  ⑦:TUgMemo元件,控制元件名稱為UgMemo01-UgMemo07。

  ⑧:TUgFSButton元件,控制元件名稱為UgFSButton01。

  • UgWebRunFrame屬性設定

    • Align:設定頁面的對齊方式=alClient,即使用客戶區對齊的方式。
  • ①UgPageControl01屬性設定

    • Align:設定頁面的對齊方式=alClient,即使用客戶區對齊的方式。   在窗體結構與檢視器中選擇UgPageControl01,然後點選左上角的[新增]按鈕新增Tab頁面。總計需要新增七個頁面,名稱為UniTabSheet01-UniTabSheet07。

      分別點選各個TabSheet,修改頁面標籤的標題Caption。從左至右的各個TabSheet的Caption分別為地理圖表、餅狀圖表、儀表盤、面積圖、棒狀圖、氣泡圖、曲線圖。   分別點選各個TabSheet,分別放置一個UgDBGrid、UgFSGoogleChart、UgContainerPanel、UgRadioGroup、UgMemo、,每個TabSheet中均包含這些控制元件,編號分別一一對應。比如UniTabSheet01中放置的是UgDBGrid01、UgFSGoogleChart01、UgContainerPanel01、UgRadioGroup01、UgMemo01。其他頁面中的標籤依此放置。

  • ②UgDataSource01-UgDataSource07屬性設定

    • DataSet:設定對應繫結的數據集,設定為與該控制元件名稱對應序號的數據集控制元件。,比如UgDataSource01的DataSet屬性設定為UgRFDataSet01。
  • ③UgDBGrid01-UgDBGrid07屬性設定   雙擊表格控制元件,打開欄位編輯界面,進行欄位編輯。

      地理圖表欄位結構:

      餅狀圖表欄位結構:

      儀表盤欄位結構:

      面積圖欄位結構:

      棒狀圖欄位結構:

      氣泡圖欄位結構:

      曲線圖欄位結構:

    • DataSource:設定繫結的數據源控制元件,此處設定序號對應的控制元件,比如UgDBGrid01的DataSource需設定為UgDataSource01。
    • Align:設定對齊方式,設定為alLeft。
  • ④UgRFDataSet01-UgRFDataSet07屬性設定

    • SQL:設定查詢的數據內容,此處需設定為自定義的內容。
  • UgRFDataSet01

--地理圖表數據
SELECT 'Germany' AS position, 200 AS population
UNION
SELECT 'United States' AS position, 300 AS population 
UNION
SELECT 'Brazil' AS position, 400 AS population
UNION
SELECT 'Canada'  AS position, 500 AS population
UNION
SELECT 'FRANCE' AS position, 600 AS population
UNION 
SELECT 'RU' AS position, 700 AS population
1
2
3
4
5
6
7
8
9
10
11
12
  • UgRFDataSet02
--餅狀圖表數據
SELECT '工作' AS task,CAST('25.20' AS Float) AS cust,11 AS hoursperday
UNION 
SELECT '飲食' AS task,CAST('40' AS Float) AS cust, 2 AS hoursperday
UNION
SELECT '交流' AS task,CAST('35.60' AS Float) AS cust, 2 AS hoursperday
UNION
SELECT '看電視' AS task,CAST('10' AS Float) AS cust, 10 AS hoursperday
UNION
SELECT '睡覺' AS task,CAST('30' AS Float) AS cust, 7 AS hoursperday
1
2
3
4
5
6
7
8
9
10
  • UgRFDataSet03
--儀表盤數據
SELECT '記憶體' AS Label,80 AS Value
UNION
SELECT 'CPU' AS Label,55 AS Value
UNION 
SELECT '網路' AS Label,68 AS Value
1
2
3
4
5
6
  • UgRFDataSet04
--面積圖數據
SELECT '2004' AS years,1000 AS sales,400 AS expenses
UNION
SELECT '2005' AS years,1170 AS sales,490 AS expenses
UNION
SELECT '2006' AS years,660 AS sales, 460 AS expenses
UNION
SELECT '2007' AS years,1030 AS sales, 1120 AS expenses
UNION
SELECT '2008' AS years,1080 AS sales, 1000 AS expenses
UNION
SELECT '2009' AS years,1090 AS sales, 540 AS expenses
1
2
3
4
5
6
7
8
9
10
11
12
  • UgRFDataSet05
--棒狀圖數據
SELECT '2004' AS years,1000 AS sales,400 AS expenses
UNION
SELECT '2005' AS years,1170 AS sales,490 AS expenses
UNION
SELECT '2006' AS years,660 AS sales, 460 AS expenses
UNION
SELECT '2007' AS years,1030 AS sales, 1120 AS expenses
UNION
SELECT '2008' AS years,1080 AS sales, 1000 AS expenses
UNION
SELECT '2009' AS years,1090 AS sales, 540 AS expenses
1
2
3
4
5
6
7
8
9
10
11
12
  • UgRFDataSet06
--氣泡圖數據
SELECT 'CAN' AS ID,CAST('80.66' AS float) AS lifeexpe, CAST('1.67' AS float) AS fertility, 'North America' AS region, 33739900 AS [population]
UNION
SELECT 'DEU' AS ID,CAST('79.84' AS float) AS lifeexpe, CAST('1.36' AS float) AS fertility, 'Europe' AS region, 81902307 AS [population]
UNION
SELECT 'DNK' AS ID,CAST('78.6' AS float) AS lifeexpe, CAST('1.84' AS float) AS fertility, 'Europe' AS region, 5523095 AS [population]
UNION
SELECT 'EGY' AS ID,CAST('72.73' AS float) AS lifeexpe, CAST('2.78' AS float) AS fertility, 'Middle East' AS region, 79716203 AS [population]
UNION
SELECT 'GBR' AS ID,CAST('80.05' AS float) AS lifeexpe, CAST('2' AS float) AS fertility, 'Europe' AS region, 61801570 AS [population]
UNION
SELECT 'IRN' AS ID,CAST('72.49' AS float) AS lifeexpe, CAST('1.7' AS float) AS fertility, 'Middle East' AS region, 73137148 AS [population]
UNION
SELECT 'IRQ' AS ID,CAST('68.09' AS float) AS lifeexpe, CAST('4.77' AS float) AS fertility, 'Middle East' AS region, 31090763 AS [population]
UNION
SELECT 'ISR' AS ID,CAST('81.55' AS float) AS lifeexpe, CAST('2.96' AS float) AS fertility, 'Middle East' AS region, 7485600 AS [population]
UNION
SELECT 'RUS' AS ID,CAST('68.6' AS float) AS lifeexpe, CAST('1.54' AS float) AS fertility, 'Europe' AS region, 14185000 AS [population]
UNION
SELECT 'USA' AS ID,CAST('78.09' AS float) AS lifeexpe, CAST('2.05' AS float) AS fertility, 'Middle East' AS region, 307007000 AS [population]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  • UgRFDataSet07
--曲線圖
SELECT '2004' AS years,1000 AS sales,400 AS expenses
UNION
SELECT '2005' AS years,1170 AS sales,490 AS expenses
UNION
SELECT '2006' AS years,660 AS sales, 460 AS expenses
UNION
SELECT '2007' AS years,1030 AS sales, 1120 AS expenses
UNION
SELECT '2008' AS years,1080 AS sales, 1000 AS expenses
UNION
SELECT '2009' AS years,1090 AS sales, 540 AS expenses

1
2
3
4
5
6
7
8
9
10
11
12
13
  • UgContainerPanel01-UgContainerPanel07屬性設定

    • Align:設定控制元件的對齊方式,設定為alRight。
  • ⑤UgFSGoogleChart01-UgFSGoogleChart屬性設定

    • Align:設定對齊方式,設定為alClient。
    • ChartDataSet:設定圖表繫結的數據集,序號需一一對應,比如UgFSGoogleChart01的ChartDataSet需設定為UgRFDataSet01。
    • ChartType:設定圖表的型別,從控制元件名稱編號由小到大依次設定為GeoChart、PieChart、Gauge、AreaChart、Bar、BubbleChart、LineChart。
  • ⑥UgRadioGroup01-UgRadioGroup07屬性設定

    • Align:設定控制元件的對齊方式,該控制元件位於UgContainerPanel中,每個控制元件對應編號放置於面板控制元件中,設定為alTop。
    • Caption:設定選框的標題,設定為樣式。
    • Items:設定其中的選項。點選右側的[√]打開編輯器進行編輯,根據需要新增如圖,除了UgRadioGroup02為7個樣式,其餘的均為5個樣式,以樣式X進行命名。
  • ⑦UgMemo01-UgMemo07屬性設定

    • Align:設定控制元件的對齊方式,該控制元件位於UgContainerPanel中,每個控制元件對應編號放置於面板控制元件中,設定為alClIent。
  • ⑧UgFSButton01屬性設定

    • Caption:設定按鈕的字幕=載入圖表。

# 3. 程式設計

  點選程式設計界面右下角的按鈕,切換至單元選擇界面,勾選需要使用的單元。該程式的程式需要引用TARSLink單元。

# 3.1. 程式初始設定

  設定自定義副程式,在樣式選項選擇變更后,重新設定圖表樣式。

    //JScript
    function OptionChange(AChart,AMemo)
    //設定選項變更內容
    {
      AChart.ChartOptions.Clear;
      AChart.ChartOptions.Add(AMemo.Lines.Text);
    }
    
    1
    2
    3
    4
    5
    6
    7
    //PasScript
    procedure OptionChange(AChart:TUgFSGoogleChart; AMemo: TUgMemo);
    //設定選項變更內容
    Begin
      AChart.ChartOptions.Clear;
      AChart.ChartOptions.Add(AMemo.Lines.Text);
    End;
    
    1
    2
    3
    4
    5
    6
    7
    // Make sure to add code blocks to your code group

      程式啟動時開啟數據集。

      //JScript
      {
        UgRFDataSet01.Connection = GetRFWeb;
        UgRFDataSet01.SQL.Text = "SELECT 'Germany' AS position, 200 AS population " + 
      	"UNION SELECT 'United States' AS position, 300 AS population " + 
      	"UNION SELECT 'Brazil' AS position, 400 AS population " +
      	"UNION SELECT 'Canada'  AS position, 500 AS population " +
      	"UNION SELECT 'FRANCE' AS position, 600 AS population " +
      	"UNION SELECT 'RU' AS position, 700 AS population";
        UgRFDataSet01.Open;
        UgRFDataSet02.Connection = GetRFWeb;
        UgRFDataSet02.SQL.Text = "SELECT '" + UGMM.LT("工作") + "' AS task,CAST('25.20' AS Float) AS cust,11 AS hoursperday " +
      	"UNION SELECT '" + UGMM.LT("飲食") + "' AS task,CAST('40' AS Float) AS cust, 2 AS hoursperday " +
      	"UNION SELECT '" + UGMM.LT("交流") + "' AS task,CAST('35.60' AS Float) AS cust, 2 AS hoursperday " +
      	"UNION SELECT '" + UGMM.LT("看電視") + "' AS task,CAST('10' AS Float) AS cust, 10 AS hoursperday " +
      	"UNION SELECT '" + UGMM.LT("睡覺") + "' AS task,CAST('30' AS Float) AS cust, 7 AS hoursperday";
        UgRFDataSet02.Open;
        UgRFDataSet03.Connection = GetRFWeb;
        UgRFDataSet03.SQL.Text = "SELECT '" +UGMM.LT("記憶體") + "' AS Label,80 AS Value " +
      	"UNION SELECT 'CPU' AS Label,55 AS Value " + 
      	"UNION SELECT '" + UGMM.LT("網路") + "' AS Label,68 AS Value";
        UgRFDataSet03.Open;
        UgRFDataSet04.Connection = GetRFWeb;
        UgRFDataSet05.SQL.Text = "SELECT '2004' AS years,1000 AS sales,400 AS expenses " +
      	"UNION SELECT '2005' AS years,1170 AS sales,490 AS expenses " +
      	"UNION SELECT '2006' AS years,660 AS sales, 460 AS expenses " +
      	"UNION SELECT '2007' AS years,1030 AS sales, 1120 AS expenses " +
      	"UNION SELECT '2008' AS years,1080 AS sales, 1000 AS expenses " +
      	"UNION SELECT '2009' AS years,1090 AS sales, 540 AS expenses";
        UgRFDataSet04.Open;
        UgRFDataSet05.Connection = GetRFWeb;
        UgRFDataSet05.SQL.Text = "SELECT '2004' AS years,1000 AS sales,400 AS expenses " +
      	"UNION SELECT '2005' AS years,1170 AS sales,490 AS expenses " +
      	"UNION SELECT '2006' AS years,660 AS sales, 460 AS expenses " +
      	"UNION SELECT '2007' AS years,1030 AS sales, 1120 AS expenses " +
      	"UNION SELECT '2008' AS years,1080 AS sales, 1000 AS expenses " +
      	"UNION SELECT '2009' AS years,1090 AS sales, 540 AS expenses";
        UgRFDataSet05.Open;
        UgRFDataSet06.Connection = GetRFWeb;
        UgRFDataSet06.SQL.Text = "SELECT 'CAN' AS ID,CAST('80.66' AS float) AS lifeexpe, CAST('1.67' AS float) AS fertility, 'North America' AS region, 33739900 AS [population] " +
      	"UNION SELECT 'DEU' AS ID,CAST('79.84' AS float) AS lifeexpe, CAST('1.36' AS float) AS fertility, 'Europe' AS region, 81902307 AS [population] " +
      	"UNION SELECT 'DNK' AS ID,CAST('78.6' AS float) AS lifeexpe, CAST('1.84' AS float) AS fertility, 'Europe' AS region, 5523095 AS [population] " +
      	"UNION SELECT 'EGY' AS ID,CAST('72.73' AS float) AS lifeexpe, CAST('2.78' AS float) AS fertility, 'Middle East' AS region, 79716203 AS [population] " +
      	"UNION SELECT 'GBR' AS ID,CAST('80.05' AS float) AS lifeexpe, CAST('2' AS float) AS fertility, 'Europe' AS region, 61801570 AS [population] " +
      	"UNION SELECT 'IRN' AS ID,CAST('72.49' AS float) AS lifeexpe, CAST('1.7' AS float) AS fertility, 'Middle East' AS region, 73137148 AS [population] " +
      	"UNION SELECT 'IRQ' AS ID,CAST('68.09' AS float) AS lifeexpe, CAST('4.77' AS float) AS fertility, 'Middle East' AS region, 31090763 AS [population] " +
      	"UNION SELECT 'ISR' AS ID,CAST('81.55' AS float) AS lifeexpe, CAST('2.96' AS float) AS fertility, 'Middle East' AS region, 7485600 AS [population] " +
      	"UNION SELECT 'RUS' AS ID,CAST('68.6' AS float) AS lifeexpe, CAST('1.54' AS float) AS fertility, 'Europe' AS region, 14185000 AS [population] " +
      	"UNION SELECT 'USA' AS ID,CAST('78.09' AS float) AS lifeexpe, CAST('2.05' AS float) AS fertility, 'Middle East' AS region, 307007000 AS [population]";
        UgRFDataSet06.Open;
        UgRFDataSet07.Connection = GetRFWeb;
        UgRFDataSet07.SQL.Text = "SELECT '2004' AS years,1000 AS sales,400 AS expenses " +
      	"UNION SELECT '2005' AS years,1170 AS sales,490 AS expenses " +
      	"UNION SELECT '2006' AS years,660 AS sales, 460 AS expenses " +
      	"UNION SELECT '2007' AS years,1030 AS sales, 1120 AS expenses " +
      	"UNION SELECT '2008' AS years,1080 AS sales, 1000 AS expenses " +
      	"UNION SELECT '2009' AS years,1090 AS sales, 540 AS expenses";
        UgRFDataSet07.Open;
      }
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      //PasScript
      Begin
        UgRFDataSet01.Connection := GetRFWeb;
        UgRFDataSet01.SQL.Text := 'SELECT ''Germany'' AS position, 200 AS population ' + 
      	'UNION SELECT ''United States'' AS position, 300 AS population ' + 
      	'UNION SELECT ''Brazil'' AS position, 400 AS population ' +
      	'UNION SELECT ''Canada''  AS position, 500 AS population ' +
      	'UNION SELECT ''FRANCE'' AS position, 600 AS population ' +
      	'UNION SELECT ''RU'' AS position, 700 AS population';
        UgRFDataSet01.Open;
        UgRFDataSet02.Connection := GetRFWeb;
        UgRFDataSet02.SQL.Text := 'SELECT ''' + UGMM.LT('工作') + ''' AS task,CAST(''25.20'' AS Float) AS cust,11 AS hoursperday ' +
      	'UNION SELECT ''' + UGMM.LT('飲食') + ''' AS task,CAST(''40'' AS Float) AS cust, 2 AS hoursperday ' +
      	'UNION SELECT ''' + UGMM.LT('交流') + ''' AS task,CAST(''35.60'' AS Float) AS cust, 2 AS hoursperday ' +
      	'UNION SELECT ''' + UGMM.LT('看電視') + ''' AS task,CAST(''10'' AS Float) AS cust, 10 AS hoursperday ' +
      	'UNION SELECT ''' + UGMM.LT('睡覺') + ''' AS task,CAST(''30'' AS Float) AS cust, 7 AS hoursperday';
        UgRFDataSet02.Open;
        UgRFDataSet03.Connection := GetRFWeb;
        UgRFDataSet03.SQL.Text := 'SELECT ''' +UGMM.LT('記憶體') + ''' AS Label,80 AS Value ' +
      	'UNION SELECT ''CPU'' AS Label,55 AS Value ' + 
      	'UNION SELECT ''' + UGMM.LT('網路') + ''' AS Label,68 AS Value';
        UgRFDataSet03.Open;
        UgRFDataSet04.Connection := GetRFWeb;
        UgRFDataSet05.SQL.Text := 'SELECT ''2004'' AS years,1000 AS sales,400 AS expenses ' +
      	'UNION SELECT ''2005'' AS years,1170 AS sales,490 AS expenses ' +
      	'UNION SELECT ''2006'' AS years,660 AS sales, 460 AS expenses ' +
      	'UNION SELECT ''2007'' AS years,1030 AS sales, 1120 AS expenses ' +
      	'UNION SELECT ''2008'' AS years,1080 AS sales, 1000 AS expenses ' +
      	'UNION SELECT ''2009'' AS years,1090 AS sales, 540 AS expenses';
        UgRFDataSet04.Open;
        UgRFDataSet05.Connection := GetRFWeb;
        UgRFDataSet05.SQL.Text := 'SELECT ''2004'' AS years,1000 AS sales,400 AS expenses ' +
      	'UNION SELECT ''2005'' AS years,1170 AS sales,490 AS expenses ' +
      	'UNION SELECT ''2006'' AS years,660 AS sales, 460 AS expenses ' +
      	'UNION SELECT ''2007'' AS years,1030 AS sales, 1120 AS expenses ' +
      	'UNION SELECT ''2008'' AS years,1080 AS sales, 1000 AS expenses ' +
      	'UNION SELECT ''2009'' AS years,1090 AS sales, 540 AS expenses';
        UgRFDataSet05.Open;
        UgRFDataSet06.Connection := GetRFWeb;
        UgRFDataSet06.SQL.Text := 'SELECT ''CAN'' AS ID,CAST(''80.66'' AS float) AS lifeexpe, CAST(''1.67'' AS float) AS fertility, ''North America'' AS region, 33739900 AS [population] ' +
      	'UNION SELECT ''DEU'' AS ID,CAST(''79.84'' AS float) AS lifeexpe, CAST(''1.36'' AS float) AS fertility, ''Europe'' AS region, 81902307 AS [population] ' +
      	'UNION SELECT ''DNK'' AS ID,CAST(''78.6'' AS float) AS lifeexpe, CAST(''1.84'' AS float) AS fertility, ''Europe'' AS region, 5523095 AS [population] ' +
      	'UNION SELECT ''EGY'' AS ID,CAST(''72.73'' AS float) AS lifeexpe, CAST(''2.78'' AS float) AS fertility, ''Middle East'' AS region, 79716203 AS [population] ' +
      	'UNION SELECT ''GBR'' AS ID,CAST(''80.05'' AS float) AS lifeexpe, CAST(''2'' AS float) AS fertility, ''Europe'' AS region, 61801570 AS [population] ' +
      	'UNION SELECT ''IRN'' AS ID,CAST(''72.49'' AS float) AS lifeexpe, CAST(''1.7'' AS float) AS fertility, ''Middle East'' AS region, 73137148 AS [population] ' +
      	'UNION SELECT ''IRQ'' AS ID,CAST(''68.09'' AS float) AS lifeexpe, CAST(''4.77'' AS float) AS fertility, ''Middle East'' AS region, 31090763 AS [population] ' +
      	'UNION SELECT ''ISR'' AS ID,CAST(''81.55'' AS float) AS lifeexpe, CAST(''2.96'' AS float) AS fertility, ''Middle East'' AS region, 7485600 AS [population] ' +
      	'UNION SELECT ''RUS'' AS ID,CAST(''68.6'' AS float) AS lifeexpe, CAST(''1.54'' AS float) AS fertility, ''Europe'' AS region, 14185000 AS [population] ' +
      	'UNION SELECT ''USA'' AS ID,CAST(''78.09'' AS float) AS lifeexpe, CAST(''2.05'' AS float) AS fertility, ''Middle East'' AS region, 307007000 AS [population]';
        UgRFDataSet06.Open;
        UgRFDataSet07.Connection := GetRFWeb;
        UgRFDataSet07.SQL.Text := 'SELECT ''2004'' AS years,1000 AS sales,400 AS expenses ' +
      	'UNION SELECT ''2005'' AS years,1170 AS sales,490 AS expenses ' +
      	'UNION SELECT ''2006'' AS years,660 AS sales, 460 AS expenses ' +
      	'UNION SELECT ''2007'' AS years,1030 AS sales, 1120 AS expenses ' +
      	'UNION SELECT ''2008'' AS years,1080 AS sales, 1000 AS expenses ' +
      	'UNION SELECT ''2009'' AS years,1090 AS sales, 540 AS expenses';
        UgRFDataSet07.Open;
      End.
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      // Make sure to add code blocks to your code group

      # 3.2. 事件設定

      • ⑧UgFSButton01-OnClick事件

        點選[載入圖表]按鈕,開啟圖表。

        //JScript
        function UgFSButton01OnClick(sender)
        //點選載入圖片
        {
          switch (UgPageControl01.TabIndex) { 
          case 0: {UgFSGoogleChart01.LoadChart; }
          case 1: {UgFSGoogleChart02.LoadChart; }
          case 2: {UgFSGoogleChart03.LoadChart; }
          case 3: {UgFSGoogleChart04.LoadChart; }
          case 4: {UgFSGoogleChart05.LoadChart; }
          case 5: {UgFSGoogleChart06.LoadChart; }
          case 6: {UgFSGoogleChart07.LoadChart; }
          }
        }
        
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        //PasScript
        procedure UgFSButton01OnClick(sender: tobject);
        //點選載入圖片
        begin
          case UgPageControl01.TabIndex of 
          0: UgFSGoogleChart01.LoadChart;
          1: UgFSGoogleChart02.LoadChart;
          2: UgFSGoogleChart03.LoadChart;
          3: UgFSGoogleChart04.LoadChart;
          4: UgFSGoogleChart05.LoadChart;
          5: UgFSGoogleChart06.LoadChart;
          6: UgFSGoogleChart07.LoadChart;
          end;
        end;
        
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        // Make sure to add code blocks to your code group
        • ⑥UgRadioGroup01-UgRadioGroup07-OnClick屬性設定

          點選樣式選框中的樣式,變更圖表顯示的樣式。

          //JScript
          function UgRadioGroup01OnClick(sender)
          //設定地形圖樣式選項
          {
            switch (UgRadioGroup01.ItemIndex) { 
            case 0: {UgMemo01.Lines.Text = "displayMode: \"markers\",";}
            case 1: {UgMemo01.Lines.Text = "displayMode: \"text\","; }
            case 2: {UgMemo01.Lines.Text = "displayMode: \"region\","; }
            case 3: 
            {
              UgMemo01.Lines.Clear;
              UgMemo01.Lines.Add("displayMode: \"region\",");
              UgMemo01.Lines.Add("colorAxis: {colors: [\"green\", \"blue\"]}, ");
            }
            case 4: 
            {
              UgMemo01.Lines.Clear;
              UgMemo01.Lines.Add("displayMode: \"region\",");
              UgMemo01.Lines.add("backgroundColor: \"#81d4fa\",");
              UgMemo01.Lines.Add("colorAxis: {colors: [\"#00853f\", \"black\", \"#e31b23\"]},");
              UgMemo01.Lines.Add("tooltip: {textStyle: {color: \"#FF0000\"}, showColorCode: true},");
            }
            }
            //ShowMessage("1");
            OptionChange(UgFSGoogleChart01,UgMemo01);
            UgFSButton01.Click;
          }
          
          function UgRadioGroup02OnClick(sender)
          //設定餅圖樣式選項
          {
            switch (UgRadioGroup02.ItemIndex) { 
            case 0: 
            {
              UgMemo02.Lines.Clear;
              UgMemo02.Lines.Add("title: \"My Daily Activities (1)\", ");
              UgMemo02.Lines.Add("tooltip: {textStyle: {color: \"#FF0000\"}, showColorCode: true},");
            }
            case 1: 
            {
              UgMemo02.Lines.Clear;
              UgMemo02.Lines.Add("title: \"My Daily Activities (2)\", ");
              UgMemo02.Lines.Add("is3D: true, ");
            }
            case 2: 
            {
              UgMemo02.Lines.Clear;
              UgMemo02.Lines.Add("title: \"My Daily Activities (3)\", ");
              UgMemo02.Lines.Add("pieHole: 0.4,");
            }
            case 3: 
            {
              UgMemo02.Lines.Clear;
              UgMemo02.Lines.Add("title: \"My Daily Activities (4)\", ");
              UgMemo02.Lines.Add("sliceVisibilityThreshold: .2 ");
            }
            case 4: 
            {
              UgMemo02.Lines.Clear;
              UgMemo02.Lines.Add("legend: \"none\",");
              UgMemo02.Lines.add("pieStartAngle: 100,");
            }
            case 5: {UgMemo02.Lines.Text = "pieSliceText: \"label\", "; }
            case 6: {UgMemo02.Lines.Text = "pieSliceText: \"value\", "; }
            }
            OptionChange(UgFSGoogleChart02,UgMemo02);
            UgFSButton01.Click;  
          }
          
          function UgRadioGroup03OnClick(sender)
          //設定儀表盤樣式
          {
          switch(UgRadioGroup03.ItemIndex) { 
            case 0: {UgMemo03.Lines.Clear;}
            case 1: 
            {
              UgMemo03.Lines.Clear;
              UgMemo03.Lines.Add("width: 400, height: 120, ");
              UgMemo03.Lines.Add("redFrom: 90, redTo: 100, ");
              UgMemo03.Lines.Add("yellowFrom:75, yellowTo: 90, ");
              UgMemo03.Lines.Add("minorTicks: 5, ");
            }
            case 2: 
            {
              UgMemo03.Lines.Clear;
              UgMemo03.Lines.Add("redFrom: 90, redTo: 100, ");
              UgMemo03.Lines.Add("yellowFrom:75, yellowTo: 90, ");
              UgMemo03.Lines.Add("minorTicks: 5, ");
            }
            case 3: 
            {
              UgMemo03.Lines.Clear;
              UgMemo03.Lines.Add("redFrom: 50, redTo: 100, ");
              UgMemo03.Lines.Add("yellowFrom:50, yellowTo: 90, ");
              UgMemo03.Lines.Add("minorTicks: 5, ");
            }
            case 4: 
            {
              UgMemo03.Lines.Clear;
              UgMemo03.Lines.Add("redFrom: 90, redTo: 200, ");
              UgMemo03.Lines.add("yellowFrom:75, yellowTo: 90, ");
              UgMemo03.Lines.Add("min: 50, ");
              UgMemo03.Lines.Add("max: 200, ");
            }
            }
            OptionChange(UgFSGoogleChart03,UgMemo03);
            UgFSButton01.Click;  
          }
          
          function UgRadioGroup04OnClick(sender)
          //設定面積圖樣式
          {
            switch(UgRadioGroup04.ItemIndex) {
            case 0: 
            {
              UgMemo04.Lines.Clear;
              UgMemo04.Lines.Add("title: \"Company Performance\", ");
              UgMemo04.Lines.Add("curveType: \"none\", ");
              UgMemo04.Lines.Add("legend: { position: \"right\"}, ");
            }
            case 1: 
            {
              UgMemo04.Lines.Clear;
              UgMemo04.Lines.Add("title: \"Company Performance\", ");
              UgMemo04.Lines.Add("curveType: \"function\", ");
              UgMemo04.Lines.Add("legend: { position: \"bottom\" }, ");
            }
            case 2: 
            {
              UgMemo04.Lines.Clear;
              UgMemo04.Lines.Add("title: \"Company Performance\", ");
              UgMemo04.Lines.Add("curveType: \"function\", ");
              UgMemo04.Lines.Add("legend: { position: \"bottom\" }, ");
              UgMemo04.Lines.Add("orientation: \"vertical\", ");   
            }
            case 3: 
            {
              UgMemo04.Lines.Clear;
              UgMemo04.Lines.Add("title: \"Company Performance\", ");
              UgMemo04.Lines.Add("curveType: \"function\", ");
              UgMemo04.Lines.Add("legend: { position: \"bottom\" }, ");
              UgMemo04.Lines.Add("orientation: \"horizontal\", ");
            }
            case 4: 
            {
              UgMemo04.Lines.Clear;
              UgMemo04.Lines.Add("title: \"Company Performance\", ");
              UgMemo04.Lines.add("curveType: \"none\", ");
              UgMemo04.Lines.Add("legend: { position: \"right\"}, ");
              UgMemo04.Lines.Add("selectionMode: \"multiple\", ");
            }
            }
            OptionChange(UgFSGoogleChart04,UgMemo04);
            UgFSButton01.Click;
          }
          
          function UgRadioGroup05OnClick(sender)
          //設定棒狀圖樣式
          {
            switch(UgRadioGroup05.ItemIndex) { 
            case 0: 
            {
              UgMemo05.Lines.Clear;
              UgMemo05.Lines.Add("title: \"Company Performance\", ");
              UgMemo05.Lines.Add("legend: { position: \"none\"}, ");
              UgMemo05.Lines.Add("isStacked: true, ");
            }
            case 1: 
            {
              UgMemo05.Lines.Clear;
              UgMemo05.Lines.Add("title: \"Company Performance\", ");
              UgMemo05.Lines.Add("subtitle: \"Sales, Expenses, and Profit: 2014-2017\", ");
              UgMemo05.Lines.Add("legend: { position: \"bottom\", maxLines: 3 }, ");
            }
            case 2: 
            {
              UgMemo05.Lines.Clear;
              UgMemo05.Lines.Add("title: \"Company Performance\", ");
              UgMemo05.Lines.Add("legend: { position: \"bottom\", maxLines: 3 }, ");
              UgMemo05.Lines.Add("orientation: \"vertical\", ");   
            }
            case 3: 
            {
              UgMemo05.Lines.Clear;
              UgMemo05.Lines.Add("title: \"Company Performance\", ");
              UgMemo05.Lines.Add("legend: { position: \"bottom\", maxLines: 3 }, ");
              UgMemo05.Lines.Add("orientation: \"horizontal\", ");
            }
            case 4: 
            {
              UgMemo05.Lines.Clear;
              UgMemo05.Lines.Add("title: \"Company Performance\", ");
              UgMemo05.Lines.Add("legend: { position: \"right\"}, ");
              UgMemo05.Lines.Add("selectionMode: \"multiple\", ");
            }
            }
            OptionChange(UgFSGoogleChart05,UgMemo05);
            UgFSButton01.Click;
          }
          
          function UgRadioGroup06OnClick(sender)
          //泡泡圖樣式
          {
            switch (UgRadioGroup06.ItemIndex) { 
            case 0: 
            {
              UgMemo06.Lines.Clear;
              UgMemo06.Lines.Add(" hAxis: {title: \"預期壽命\"}, ");
              UgMemo06.Lines.Add(" vAxis: {title: \"生育率\"}, ");
              UgMemo06.Lines.Add("bubble: { ");
              UgMemo06.Lines.Add("  textStyle: { ");
              UgMemo06.Lines.Add("    fontSize: 12, ");
              UgMemo06.Lines.Add("    fontName: \"Times-Roman\", ");
              UgMemo06.Lines.Add("    color: \"green\", ");    
              UgMemo06.Lines.Add("    bold: true, ");    
              UgMemo06.Lines.Add("     italic: true ");   
              UgMemo06.Lines.Add("   } "); 
              UgMemo06.Lines.Add(" }, ");
            }
            case 1: 
            {
              UgMemo06.Lines.Clear;
              UgMemo06.Lines.Add(" title: \"預期壽命之間的關係\", ");
              UgMemo06.Lines.Add(" hAxis: {title: \"預期壽命\"}, ");
              UgMemo06.Lines.Add(" vAxis: {title: \"生育率\"}, ");
              UgMemo06.Lines.Add(" bubble: {textStyle: {fontSize: 11}}, ");
            }
            case 2: 
            {
              UgMemo06.Lines.Clear;
              UgMemo06.Lines.Add(" title: \"預期壽命之間的關係\", ");
            }
            case 3: 
            {
              UgMemo06.Lines.Clear;
              UgMemo06.Lines.Add(" hAxis: {title: \"Other1\"}, ");
              UgMemo06.Lines.Add(" hAxis: {title: \"New\"}, ");  
            }
            case 4: 
            {
              UgMemo06.Lines.Clear;
              UgMemo06.Lines.Add("title: \"Many possibility\", ");
            }
            }
            OptionChange(UgFSGoogleChart06,UgMemo06);
            UgFSButton01.Click;
          }
          
          function UgRadioGroup07OnClick(sender)
          //曲線圖樣式
          {
          switch(UgRadioGroup07.ItemIndex) { 
            case 0: 
            {
              UgMemo07.Lines.Clear;
              UgMemo07.Lines.Add("title: \"Company Performance\", ");
              UgMemo07.Lines.Add("curveType: \"none\", ");
              UgMemo07.Lines.Add("legend: { position: \"right\"}, ");
            }
            case 1: 
            {
              UgMemo07.Lines.Clear;
              UgMemo07.Lines.Add("title: \"Company Performance\", ");
              UgMemo07.Lines.Add("curveType: \"function\", ");
              UgMemo07.Lines.Add("legend: { position: \"bottom\" }, ");
            }
            case 2: 
            {
              UgMemo07.Lines.Clear;
              UgMemo07.Lines.Add("title: \"Company Performance\", ");
              UgMemo07.Lines.Add("curveType: \"function\", ");
              UgMemo07.Lines.Add("legend: { position: \"bottom\" }, ");
              UgMemo07.Lines.Add("orientation: \"vertical\", ");  
            }
            case 3: 
            {
              UgMemo07.Lines.Clear;
              UgMemo07.Lines.Add("title: \"Company Performance\", ");
              UgMemo07.Lines.Add("curveType: \"function\", ");
              UgMemo07.Lines.Add("legend: { position: \"bottom\" }, ");
              UgMemo07.Lines.Add("orientation: \"horizontal\", ");
            }
            case 4: 
            {
              UgMemo07.Lines.Clear;
              UgMemo07.Lines.Add("title: \"Company Performance\", ");
              UgMemo07.Lines.add("curveType: \"none\", ");
              UgMemo07.Lines.Add("legend: { position: \"right\"}, ");
              UgMemo07.Lines.Add("selectionMode: \"multiple\", ");
            }
            }
            OptionChange(UgFSGoogleChart07,UgMemo07);
            UgFSButton01.Click;
          }
          
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          41
          42
          43
          44
          45
          46
          47
          48
          49
          50
          51
          52
          53
          54
          55
          56
          57
          58
          59
          60
          61
          62
          63
          64
          65
          66
          67
          68
          69
          70
          71
          72
          73
          74
          75
          76
          77
          78
          79
          80
          81
          82
          83
          84
          85
          86
          87
          88
          89
          90
          91
          92
          93
          94
          95
          96
          97
          98
          99
          100
          101
          102
          103
          104
          105
          106
          107
          108
          109
          110
          111
          112
          113
          114
          115
          116
          117
          118
          119
          120
          121
          122
          123
          124
          125
          126
          127
          128
          129
          130
          131
          132
          133
          134
          135
          136
          137
          138
          139
          140
          141
          142
          143
          144
          145
          146
          147
          148
          149
          150
          151
          152
          153
          154
          155
          156
          157
          158
          159
          160
          161
          162
          163
          164
          165
          166
          167
          168
          169
          170
          171
          172
          173
          174
          175
          176
          177
          178
          179
          180
          181
          182
          183
          184
          185
          186
          187
          188
          189
          190
          191
          192
          193
          194
          195
          196
          197
          198
          199
          200
          201
          202
          203
          204
          205
          206
          207
          208
          209
          210
          211
          212
          213
          214
          215
          216
          217
          218
          219
          220
          221
          222
          223
          224
          225
          226
          227
          228
          229
          230
          231
          232
          233
          234
          235
          236
          237
          238
          239
          240
          241
          242
          243
          244
          245
          246
          247
          248
          249
          250
          251
          252
          253
          254
          255
          256
          257
          258
          259
          260
          261
          262
          263
          264
          265
          266
          267
          268
          269
          270
          271
          272
          273
          274
          275
          276
          277
          278
          279
          280
          281
          282
          283
          284
          285
          286
          287
          288
          289
          290
          291
          292
          293
          294
          //PasScript
          procedure UgRadioGroup01OnClick(sender: tobject);
          //設定地形圖樣式選項
          begin
            case UgRadioGroup01.ItemIndex of 
            0: UgMemo01.Lines.Text := 'displayMode: "markers",';
            1: UgMemo01.Lines.Text := 'displayMode: "text",';
            2: UgMemo01.Lines.Text := 'displayMode: "region",';
            3: 
            Begin
              UgMemo01.Lines.Clear;
              UgMemo01.Lines.Add('displayMode: "region",');
              UgMemo01.Lines.Add('colorAxis: {colors: ["green", "blue"]}, ');
            end;
            4: 
            Begin
              UgMemo01.Lines.Clear;
              UgMemo01.Lines.Add('displayMode: "region",');
              UgMemo01.Lines.add('backgroundColor: "#81d4fa",');
              UgMemo01.Lines.Add('colorAxis: {colors: ["#00853f", "black", "#e31b23"]},');
              UgMemo01.Lines.Add('tooltip: {textStyle: {color: "#FF0000"}, showColorCode: true},');
            End;
            End;
            OptionChange(UgFSGoogleChart01,UgMemo01);
            UgFSButton01.Click;
          end;
          
          procedure UgRadioGroup02OnClick(sender: tobject);
          //設定餅圖樣式選項
          begin
            case UgRadioGroup02.ItemIndex of 
            0: 
            begin
              UgMemo02.Lines.Clear;
              UgMemo02.Lines.Add('title: "My Daily Activities (1)", ');
              UgMemo02.Lines.Add('tooltip: {textStyle: {color: "#FF0000"}, showColorCode: true},');
            end;
            1: 
            begin
              UgMemo02.Lines.Clear;
              UgMemo02.Lines.Add('title: "My Daily Activities (2)", ');
              UgMemo02.Lines.Add('is3D: true, ');
            end;
            2: 
            Begin
              UgMemo02.Lines.Clear;
              UgMemo02.Lines.Add('title: "My Daily Activities (3)", ');
              UgMemo02.Lines.Add('pieHole: 0.4,');
            end;
            3: 
            Begin
              UgMemo02.Lines.Clear;
              UgMemo02.Lines.Add('title: "My Daily Activities (4)", ');
              UgMemo02.Lines.Add('sliceVisibilityThreshold: .2 ');
            end;
            4: 
            Begin
              UgMemo02.Lines.Clear;
              UgMemo02.Lines.Add('legend: "none",');
              UgMemo02.Lines.add('pieStartAngle: 100,');
            End;
            5: UgMemo02.Lines.Text := 'pieSliceText: "label", ';
            6: UgMemo02.Lines.Text := 'pieSliceText: "value", ';
            End;
            OptionChange(UgFSGoogleChart02,UgMemo02);
            UgFSButton01.Click;  
          end;
          
          procedure UgRadioGroup03OnClick(sender: tobject);
          //設定儀表盤樣式
          begin
            case UgRadioGroup03.ItemIndex of 
            0: 
            begin
              UgMemo03.Lines.Clear;
            end;
            1: 
            begin
              UgMemo03.Lines.Clear;
              UgMemo03.Lines.Add('width: 400, height: 120, ');
              UgMemo03.Lines.Add('redFrom: 90, redTo: 100, ');
              UgMemo03.Lines.Add('yellowFrom:75, yellowTo: 90, ');
              UgMemo03.Lines.Add('minorTicks: 5, ');
            end;
            2: 
            Begin
              UgMemo03.Lines.Clear;
              UgMemo03.Lines.Add('redFrom: 90, redTo: 100, ');
              UgMemo03.Lines.Add('yellowFrom:75, yellowTo: 90, ');
              UgMemo03.Lines.Add('minorTicks: 5, ');
            end;
            3: 
            Begin
              UgMemo03.Lines.Clear;
              UgMemo03.Lines.Add('redFrom: 50, redTo: 100, ');
              UgMemo03.Lines.Add('yellowFrom:50, yellowTo: 90, ');
              UgMemo03.Lines.Add('minorTicks: 5, ');
            end;
            4: 
            Begin
              UgMemo03.Lines.Clear;
              UgMemo03.Lines.Add('redFrom: 90, redTo: 200, ');
              UgMemo03.Lines.add('yellowFrom:75, yellowTo: 90, ');
              UgMemo03.Lines.Add('min: 50, ');
              UgMemo03.Lines.Add('max: 200, ');
            End;
            End;
            OptionChange(UgFSGoogleChart03,UgMemo03);
            UgFSButton01.Click;  
          end;
          
          procedure UgRadioGroup04OnClick(sender: tobject);
          //設定面積圖樣式
          begin
            case UgRadioGroup04.ItemIndex of 
            0: 
            begin
              UgMemo04.Lines.Clear;
              UgMemo04.Lines.Add('title: "Company Performance", ');
              UgMemo04.Lines.Add('curveType: "none", ');
              UgMemo04.Lines.Add('legend: { position: "right"}, ');
            end;
            1: 
            begin
              UgMemo04.Lines.Clear;
              UgMemo04.Lines.Add('title: "Company Performance", ');
              UgMemo04.Lines.Add('curveType: "function", ');
              UgMemo04.Lines.Add('legend: { position: "bottom" }, ');
            end;
            2: 
            Begin
              UgMemo04.Lines.Clear;
              UgMemo04.Lines.Add('title: "Company Performance", ');
              UgMemo04.Lines.Add('curveType: "function", ');
              UgMemo04.Lines.Add('legend: { position: "bottom" }, ');
              UgMemo04.Lines.Add('orientation: "vertical", ');    
            end;
            3: 
            Begin
              UgMemo04.Lines.Clear;
              UgMemo04.Lines.Add('title: "Company Performance", ');
              UgMemo04.Lines.Add('curveType: "function", ');
              UgMemo04.Lines.Add('legend: { position: "bottom" }, ');
              UgMemo04.Lines.Add('orientation: "horizontal", ');
            end;
            4: 
            Begin
              UgMemo04.Lines.Clear;
              UgMemo04.Lines.Add('title: "Company Performance", ');
              UgMemo04.Lines.add('curveType: "none", ');
              UgMemo04.Lines.Add('legend: { position: "right"}, ');
              UgMemo04.Lines.Add('selectionMode: "multiple", ');
            End;
            End;
            OptionChange(UgFSGoogleChart04,UgMemo04);
            UgFSButton01.Click;
          end;
          
          procedure UgRadioGroup05OnClick(sender: tobject);
          //設定棒狀圖樣式
          begin
            case UgRadioGroup05.ItemIndex of 
            0: 
            begin
              UgMemo05.Lines.Clear;
              UgMemo05.Lines.Add('title: "Company Performance", ');
              UgMemo05.Lines.Add('legend: { position: "none"}, ');
              UgMemo05.Lines.Add('isStacked: true, ');
            end;
            1: 
            begin
              UgMemo05.Lines.Clear;
              UgMemo05.Lines.Add('title: "Company Performance", ');
              UgMemo05.Lines.Add('subtitle: "Sales, Expenses, and Profit: 2014-2017", ');
              UgMemo05.Lines.Add('legend: { position: "bottom", maxLines: 3 }, ');
            end;
            2: 
            Begin
              UgMemo05.Lines.Clear;
              UgMemo05.Lines.Add('title: "Company Performance", ');
              UgMemo05.Lines.Add('legend: { position: "bottom", maxLines: 3 }, ');
              UgMemo05.Lines.Add('orientation: "vertical", ');    
            end;
            3: 
            Begin
              UgMemo05.Lines.Clear;
              UgMemo05.Lines.Add('title: "Company Performance", ');
              UgMemo05.Lines.Add('legend: { position: "bottom", maxLines: 3 }, ');
              UgMemo05.Lines.Add('orientation: "horizontal", ');
            end;
            4: 
            Begin
              UgMemo05.Lines.Clear;
              UgMemo05.Lines.Add('title: "Company Performance", ');
              UgMemo05.Lines.Add('legend: { position: "right"}, ');
              UgMemo05.Lines.Add('selectionMode: "multiple", ');
            End;
            End;
            OptionChange(UgFSGoogleChart05,UgMemo05);
            UgFSButton01.Click;
          end;
          
          procedure UgRadioGroup06OnClick(sender: tobject);
          //泡泡圖樣式
          begin
            case UgRadioGroup06.ItemIndex of 
            0: 
            begin
              UgMemo06.Lines.Clear;
              UgMemo06.Lines.Add(' hAxis: {title: "預期壽命"}, ');
              UgMemo06.Lines.Add(' vAxis: {title: "生育率"}, ');
              UgMemo06.Lines.Add('bubble: { ');
              UgMemo06.Lines.Add('  textStyle: { ');
              UgMemo06.Lines.Add('    fontSize: 12, ');
              UgMemo06.Lines.Add('    fontName: "Times-Roman", ');
              UgMemo06.Lines.Add('    color: "green", ');    
              UgMemo06.Lines.Add('    bold: true, ');    
              UgMemo06.Lines.Add('     italic: true ');   
              UgMemo06.Lines.Add('   } '); 
              UgMemo06.Lines.Add(' }, '); 
            end;
            1: 
            begin
              UgMemo06.Lines.Clear;
              UgMemo06.Lines.Add(' title: "預期壽命之間的關係", ');
              UgMemo06.Lines.Add(' hAxis: {title: "預期壽命"}, ');
              UgMemo06.Lines.Add(' vAxis: {title: "生育率"}, ');
              UgMemo06.Lines.Add(' bubble: {textStyle: {fontSize: 11}}, ');
            end;
            2: 
            Begin
              UgMemo06.Lines.Clear;
              UgMemo06.Lines.Add(' title: "預期壽命之間的關係", ');
            end;
            3: 
            Begin
              UgMemo06.Lines.Clear;
              UgMemo06.Lines.Add(' hAxis: {title: "Other1"}, ');
              UgMemo06.Lines.Add(' hAxis: {title: "New"}, ');    
            end;
            4: 
            Begin
              UgMemo06.Lines.Clear;
              UgMemo06.Lines.Add('title: "Many possibility", ');
            End;
            End;
            OptionChange(UgFSGoogleChart06,UgMemo06);
            UgFSButton01.Click;
          end;
          
          procedure UgRadioGroup07OnClick(sender: tobject);
          //曲線圖樣式
          begin
            case UgRadioGroup07.ItemIndex of 
            0: 
            begin
              UgMemo07.Lines.Clear;
              UgMemo07.Lines.Add('title: "Company Performance", ');
              UgMemo07.Lines.Add('curveType: "none", ');
              UgMemo07.Lines.Add('legend: { position: "right"}, ');
            end;
            1: 
            begin
              UgMemo07.Lines.Clear;
              UgMemo07.Lines.Add('title: "Company Performance", ');
              UgMemo07.Lines.Add('curveType: "function", ');
              UgMemo07.Lines.Add('legend: { position: "bottom" }, ');
            end;
            2: 
            Begin
              UgMemo07.Lines.Clear;
              UgMemo07.Lines.Add('title: "Company Performance", ');
              UgMemo07.Lines.Add('curveType: "function", ');
              UgMemo07.Lines.Add('legend: { position: "bottom" }, ');
              UgMemo07.Lines.Add('orientation: "vertical", ');    
            end;
            3: 
            Begin
              UgMemo07.Lines.Clear;
              UgMemo07.Lines.Add('title: "Company Performance", ');
              UgMemo07.Lines.Add('curveType: "function", ');
              UgMemo07.Lines.Add('legend: { position: "bottom" }, ');
              UgMemo07.Lines.Add('orientation: "horizontal", ');
            end;
            4: 
            Begin
              UgMemo07.Lines.Clear;
              UgMemo07.Lines.Add('title: "Company Performance", ');
              UgMemo07.Lines.add('curveType: "none", ');
              UgMemo07.Lines.Add('legend: { position: "right"}, ');
              UgMemo07.Lines.Add('selectionMode: "multiple", ');
            End;
            End;
            OptionChange(UgFSGoogleChart07,UgMemo07);
            UgFSButton01.Click;
          end;
          
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          41
          42
          43
          44
          45
          46
          47
          48
          49
          50
          51
          52
          53
          54
          55
          56
          57
          58
          59
          60
          61
          62
          63
          64
          65
          66
          67
          68
          69
          70
          71
          72
          73
          74
          75
          76
          77
          78
          79
          80
          81
          82
          83
          84
          85
          86
          87
          88
          89
          90
          91
          92
          93
          94
          95
          96
          97
          98
          99
          100
          101
          102
          103
          104
          105
          106
          107
          108
          109
          110
          111
          112
          113
          114
          115
          116
          117
          118
          119
          120
          121
          122
          123
          124
          125
          126
          127
          128
          129
          130
          131
          132
          133
          134
          135
          136
          137
          138
          139
          140
          141
          142
          143
          144
          145
          146
          147
          148
          149
          150
          151
          152
          153
          154
          155
          156
          157
          158
          159
          160
          161
          162
          163
          164
          165
          166
          167
          168
          169
          170
          171
          172
          173
          174
          175
          176
          177
          178
          179
          180
          181
          182
          183
          184
          185
          186
          187
          188
          189
          190
          191
          192
          193
          194
          195
          196
          197
          198
          199
          200
          201
          202
          203
          204
          205
          206
          207
          208
          209
          210
          211
          212
          213
          214
          215
          216
          217
          218
          219
          220
          221
          222
          223
          224
          225
          226
          227
          228
          229
          230
          231
          232
          233
          234
          235
          236
          237
          238
          239
          240
          241
          242
          243
          244
          245
          246
          247
          248
          249
          250
          251
          252
          253
          254
          255
          256
          257
          258
          259
          260
          261
          262
          263
          264
          265
          266
          267
          268
          269
          270
          271
          272
          273
          274
          275
          276
          277
          278
          279
          280
          281
          282
          283
          284
          285
          286
          287
          288
          289
          290
          291
          292
          293
          294
          295
          296
          // Make sure to add code blocks to your code group

          # 4. 運行結果

            使用滑鼠在FastWeb功能表,點選[儲存至資料庫]按鈕,將其儲存至資料庫,點選[除錯運行]確認能夠正常打開。

            點選頁面區域可切換顯示的圖表型別,點選[載入圖表]按鈕載入對應頁面的圖表。點選右側的樣式選框可選擇對應的樣式進行圖表的載入。

          二維碼掃瞄與產生(APP)
          甘特圖展示(WEB)

          ← 二維碼掃瞄與產生(APP) 甘特圖展示(WEB)→

          Copyright © 2021-2025 愛招飛IsoFace | ALL Rights Reserved
          • 跟随系统
          • 浅色模式
          • 深色模式
          • 阅读模式