折線圖
產生資料集的折線圖,而且提供選項來新增往下探查樹狀結構以用於其他資料集。 您可以靜態地或使用服務來移入資料集。
限制
必須使用服務來移入折線圖。
附註: 如果您在可收合畫面中顯示圖表時遇到調整大小問題,請在可收合畫面的 On expand 事件上使用下列程式碼,將圖表大小調整為可用空間:
${CHART_CONTROL_ID}.refresh();配置內容
在 配置下,設定或修改視圖的外觀和行為內容。
- 螢幕大小
- 在內容名稱旁具有「畫面大小」圖示
的配置內容,每一個畫面大小可以有不同的值。 如果您未設定值,則畫面大小會繼承下一個較大畫面大小的值作為其預設值。
- 佈景主題定義
- 佈景主題定義指定視圖的顏色和樣式,並決定其外觀。 您可以在佈景主題編輯器中預覽視圖的外觀與操作方式。 請參閱 佈景主題。
下表顯示折線圖視圖的外觀配置內容:
| 外觀配置內容 | 說明 | 資料類型 |
|---|---|---|
| 平滑折線圖 | 連接資料點的曲線平滑。 | Boolean |
| 背景顏色樣式 | 背景顏色的顏色樣式。 | String |
| 資料系列顏色樣式 | 資料系列的顏色樣式。 | String |
| 資料系列自訂顏色樣式 | 自訂資料系列的顏色樣式。 在 NameValuePair中, Name 是系列名稱, Value 是指定為名稱、十六進位碼或 RGB 碼的顏色。 例如, red、 #ff0000、 rgb(255, 0, 0)。 此內容優先於 資料系列顏色樣式。 |
NameValuePair |
| 顯示值標籤 | 顯示圖表中每個點上方的資料點值。 | Boolean |
| 顯示瀏覽途徑 | 啟用此選項時,標題會顯示使用者可往下探查的樹狀結構現行位置 (視功能表選項而定)。 | Boolean |
| 點大小 | 標示值的點大小。 預設值: 2.5 像素。 | Decimal |
| XY 軸顏色樣式 | X 軸和 Y 軸的顏色樣式。 | String |
| 格線樣式 | 水平格線的樣式。 | String |
| X 標籤旋轉 | X 軸標籤的旋轉角度 (以度數為單位)。 | Decimal |
| X 軸高度 | X 軸的高度。 | Integer |
| 邊框半徑 | 圖表的半徑。 | String |
| 填補 | 圖表右、上、左及下的填補 (像素)。 | String |
高度![]() |
圖表的高度。 | Integer |
下表顯示折線圖視圖的行為配置內容:
如需可與圖表搭配使用之往下探查樹狀結構的相關資訊,請參閱 往下探查樹狀結構。
| 行為配置內容 | 說明 | 資料類型 |
|---|---|---|
| 圖表資料模式 | 選取是從服務還是從配置選項移入圖表資料。 請注意,只有透過服務流程移入適當的 Ajax 存取權,才能使用使用者可以往下探查至的樹狀結構。 | String |
| 資料服務 | 移入資料系列的服務。 | Ajax service |
| 資料序列 | seriesName 是資料系列的名稱, dataPoints 是要併入資料系列中的資料點清單。 | String 代表 seriesName , DataPoint[] 代表 dataPoints清單。 |
| 啟用功能表 | 啟用功能表的可見性。 如果您具有使用者可以往下探查至的樹狀結構,或您已新增功能表,則需要功能表。 | Boolean |
| Y 軸刻度數 | Y 軸上的刻度數。 您指定的值未解譯為確切的數字,但已調整為最適合的刻度計數以提供最佳顯示畫面。 | Integer |
| Y 軸刻度精準度 | Y 軸值標籤要顯示的小數位數。 預設小數位數為 0。 | Integer |
| Y 軸值下限 | Y 軸上的最小值。 | Decimal |
| Y 軸值上限 | Y 軸上的最大值。 | Decimal |
| 使用 X 軸撰出 | 僅顯示 X 軸資料刻度計數的數目,這是由 X 刻度計數上限 內容的值所決定。 | Boolean |
| X 軸刻度數 | X 軸上的刻度數。 您指定的值未解譯為確切的數字,但已調整為最適合的刻度計數以提供最佳顯示畫面。 | Integer |
| 顯示工具提示 | 啟用此選項時,將滑鼠移至圖表中的資料點會導致顯示工具提示。 工具提示會同時顯示點的名稱及其值。 | Boolean |
事件
在 事件 內容中設定或修改視圖的事件處理程式。 您可以將事件設為以程式化方式觸發,或在使用者與視圖互動時觸發。 如需如何定義及編碼事件的相關資訊,請參閱 使用者定義事件。 折線圖視圖具有下列類型的事件處理程式:- On load: 在載入圖表時啟動,例如,
me.defocusSeries("Brand1") - On refreshed: 在重新整理圖表時啟動,例如,
me.focusSeries("Brand1") - On click: 按一下圖表時啟動,例如,
me.transform("donut", ["Brand1","Brand2"]) - On menu action: 在偵測到功能表動作時啟動,例如,
console.log("Running menu action '" + action.name + "' on " + me.getSelectedDataPoint().label + " with value of " + me.getSelectedDataPoint().value)
鍵盤導覽
如果要使用鍵盤來導覽圖表,請執行下列動作:
- 按
Tab,直到強調顯示您想要的圖表為止。 - 按
Tab以取得圖表內的焦點。 - 使用右移鍵、左移鍵、上移鍵或下移鍵在圖表內導覽。附註: 若要依照說明來導覽圖表,您必須使用 JAWS 螢幕閱讀器。
方法
如需折線圖方法的相關資訊,請參閱 折線圖 JavaScript API。
其他資源
如需如何建立 Coach 或頁面的相關資訊,請參閱 建置 Coach。
如需標準內容 (一般、 配置、 定位、 可見性及 HTML 屬性) 的相關資訊,請參閱 檢視內容。