折線圖

1.1 版本

1.2 應用場景

折線圖是將值標註成點，並透過線將這些點按照順序連結起來形成的圖形。

折線統計圖常用於顯示隨時間或有序類別變化的趨勢，可以顯示資料點以表示單個資料值，也可以不顯示這些資料點。在有很多資料點並且它們的顯示順序很重要時，折線圖尤其有用。

1.3 圖表特點

不僅可以表示數量的多少，而且可以反映同一事物在不同時間裏的發展變化的情況。

1.4 圖表類型

1）普通折線圖

用於顯示隨時間或有序類別而變化的趨勢，可以顯示資料點以表示單個資料值，也可以不顯示這些資料點

2）堆積折線圖

如果有兩個資料系列，折線圖中兩個資料系列是獨立的，在堆積折線圖中第一個資料系列和普通資料系列一樣。

第二個資料系列的值要和第一個系列的值在同一分類（或時間上）進行累計，展示的是兩個資料系列在同一分類（或時間上）的值的總和的變化趨勢。

3）自訂折線圖

使用者可以自訂折線圖的「堆積」和「坐標軸」的屬性。

本文以普通折線圖作為範例。

2.1 準備資料

點選設計器左上角「檔案>建立普通報表」，建立內建資料集「本年空調月銷量統計」，如下圖所示：

2.2 設計報表

2.2.1 選擇主題

點選報表上方的主題名稱，彈出 主題選擇 介面，選擇「清爽科技」主題。如下圖所示：

2.2.2 插入圖表

合併一片儲存格區域，點選上方工具欄插入圖表按鈕，插入「折線圖」。如下圖所示：

2.3 設計折線圖

選中圖表，點選右側屬性面板「儲存格元素」，可設定圖表的各個屬性：類型、資料、樣式、特效。

2.3.1 圖表類型

選中圖表所在儲存格，點選右側「儲存格元素>類型」可查看和選擇圖表類型。

2.3.2 綁定資料

綁定折線圖的資料如下圖所示：

注：綁定折線圖資料時，分類不能為「無」，系列名若使用「欄位值」，系列名不能和分類為同一欄位。會導致圖中只有點，沒有線。

2.3.3 設定樣式

1）選擇「樣式>標題」，設標度題正文為「本年空調月銷量統計」，其餘設定儲存預設。如下圖所示：

2）選擇「樣式>圖例」，取消勾選「圖例可見」。

3）選擇「樣式>系列」，可設定折線圖的顏色、線型、標記點等樣式。

• 線的形態有 3 種：普通、垂直、曲線。

• 空值斷開：預設開啟，即當某個分類沒有值時，該分類兩側的值不連結。

• 標記點的點樣式分為標準和自訂兩種：點樣式為標準時，可選擇不同的類型，以及設定點的填充顏色和半徑；點樣式為自訂時，可使用圖片作為標記點，並且自訂圖片的大小。

注：標記點描邊或空心顏色取自圖表背景，取不到時淺色主題下預設為 #FFFFFF，深色主題下預設為 #000000。詳細內容請參見本文 4.1 節。

本文範例具體設定如下圖所示：

2.4 效果預覽

2.4.1 PC 端

儲存報表，點選「分頁預覽」，效果如 1.2 節效果圖所示。

2.4.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Chart\LineChart\折線圖.cpt

點選下載範本：折線圖.cpt

4.1 標記點顏色獲取

問題描述

折線圖示記點預設顯示時，標記點外圍存在白圈顯示，但有時我們需要取消顯示白色外圈，該怎麼做呢。效果如下圖所示：

原因分析

標記點描邊或空心顏色取自圖表背景，預設跟隨主題，淺色主題下預設為 #FFFFFF，深色主題下預設為 #000000。如下圖所示：

解決方案

給「圖表區」背景填充設定為「顏色>透明」，或者設定為其他顏色，再修改不透明度即可。如下圖所示：