In this article, I will introduce some web chart interaction terminology, which is useful for front-end engineers when explaining how to manipulate charts developed on a website.

Interaction and Manipulation / 互動與操作

zoom in/out

放大/縮小。

範例：

We implemented zoom in and zoom out functionality so users can explore data trends more clearly.

我們實作了放大與縮小功能，讓使用者可以更清楚地探索數據趨勢。

pan around

平移拖曳畫面。

範例：

The chart supports pan around to help users navigate large datasets efficiently.

圖表支援拖曳平移，幫助使用者有效瀏覽大型資料集。

pan the chart 拖曳圖表

drag and drop

拖曳並放下。

範例：

You can drag and drop nodes on the diagram to rearrange the layout dynamically.

你可以在圖上拖曳節點來動態地重新排版。

hover over

滑鼠懸停。

範例：

When the user hovers over a data point, a tooltip displays detailed information.

當使用者滑鼠懸停在資料點上時，會顯示詳細的工具提示資訊。

legend toggle

圖例切換。

範例：

You can use the legend toggle to show or hide the sales data for individual regions.

你可以使用圖例開關來顯示或隱藏個別地區的銷售數據。

drill down

深層探究，當使用者利用滑鼠點擊一個欄位或元件時，可開啟另一頁面，顯示更詳細的資訊。

範例：

Many websites have some form of hyperlink navigation as you drill down.

瀏覽層層網頁時，你會發現很多網頁都有超連結導航。

Other terms / 其他用語

They are very common, so I will not explain them in detail.

• annotate 註釋 / 標註
• click 點擊
• double click 雙擊 / 連點兩下
• download/export chart 下載 / 匯出圖表
• filter 篩選
• highlight 高亮 / 突顯
• hover 懸停
• resize 調整大小
• scroll 滾動
• sort 排序
• toggle 切換 / 開關

Chart Elements and Components / 圖表元素與組件

axis

軸，例如 x-axis, y-axis。

範例：

The y-axis of the chart represents the total number of visitors.

圖表的 y 軸 代表總訪客人數。

legend

圖例。

範例：

Please refer to the legend to understand what each color on the chart represents.

請參考圖例，以了解圖表上每個顏色所代表的意義。

tooltip

工具提示 / 提示框。

範例：

When you hover over a bar, a tooltip appears with the exact sales figure.

當你將滑鼠游標移至長條圖上時，會出現一個工具提示，顯示精確的銷售數字。

series

系列 / 數據系列。

範例：

This chart has two series: one for new users and another for returning users.

這張圖表有兩個數據系列：一個代表新使用者，另一個代表回訪使用者。

label

標籤。

範例：

The labels on the x-axis are too crowded; we need to rotate them.

x 軸 上的標籤太擁擠了；我們需要將它們旋轉。

gridlines

網格線。

範例：

The gridlines make it easier to compare the values across different months.

網格線 使比較不同月份的數值變得更容易。

Common Chart Types / 常見圖表類型

• line chart 折線圖
• bar chart 長條圖 / 柱狀圖
• pie chart 圓餅圖
• scatter plot 散佈圖
• area chart 區域圖