折線圖

產生資料集的折線圖,而且提供選項來新增往下探查樹狀結構以用於其他資料集。 您可以靜態地或使用服務來移入資料集。

限制

必須使用服務來移入折線圖。
附註: 如果您在可收合畫面中顯示圖表時遇到調整大小問題,請在可收合畫面的 On expand 事件上使用下列程式碼,將圖表大小調整為可用空間: ${CHART_CONTROL_ID}.refresh();

配置內容

配置下,設定或修改視圖的外觀和行為內容。

螢幕大小
在內容名稱旁具有「畫面大小」圖示 螢幕大小圖示 的配置內容,每一個畫面大小可以有不同的值。 如果您未設定值,則畫面大小會繼承下一個較大畫面大小的值作為其預設值。
佈景主題定義
佈景主題定義指定視圖的顏色和樣式,並決定其外觀。 您可以在佈景主題編輯器中預覽視圖的外觀與操作方式。 請參閱 佈景主題
下表顯示折線圖視圖的外觀配置內容:
表 1. 折線圖的外觀配置內容
外觀配置內容 說明 資料類型
平滑折線圖 連接資料點的曲線平滑。 Boolean
背景顏色樣式 背景顏色的顏色樣式。 String
資料系列顏色樣式 資料系列的顏色樣式。 String
資料系列自訂顏色樣式 自訂資料系列的顏色樣式。
NameValuePair中, Name 是系列名稱, Value 是指定為名稱、十六進位碼或 RGB 碼的顏色。 例如, red#ff0000rgb(255, 0, 0)
此內容優先於 資料系列顏色樣式
NameValuePair
顯示值標籤 顯示圖表中每個點上方的資料點值。 Boolean
顯示瀏覽途徑 啟用此選項時,標題會顯示使用者可往下探查的樹狀結構現行位置 (視功能表選項而定)。 Boolean
點大小 標示值的點大小。 預設值: 2.5 像素。 Decimal
XY 軸顏色樣式 X 軸和 Y 軸的顏色樣式。 String
格線樣式 水平格線的樣式。 String
X 標籤旋轉 X 軸標籤的旋轉角度 (以度數為單位)。 Decimal
X 軸高度 X 軸的高度。 Integer
邊框半徑 圖表的半徑。 String
填補 圖表右、上、左及下的填補 (像素)。 String
高度螢幕大小圖示 圖表的高度。 Integer
下表顯示折線圖視圖的行為配置內容:
表 2. 折線圖的行為配置內容
行為配置內容 說明 資料類型
圖表資料模式 選取是從服務還是從配置選項移入圖表資料。 請注意,只有透過服務流程移入適當的 Ajax 存取權,才能使用使用者可以往下探查至的樹狀結構。 String
資料服務 移入資料系列的服務。 Ajax service
資料序列 seriesName 是資料系列的名稱, dataPoints 是要併入資料系列中的資料點清單。 String 代表 seriesNameDataPoint[] 代表 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 屬性) 的相關資訊,請參閱 檢視內容