Scenario
實務上如遇到多個 charts，需要同時顯示，並可以同步進行 x 軸的區間選擇，觀察同一個區間，每個不同 charts 的變化量，或是 zoom-in、zoom-out，則需要透過 pane 的方式。
Install
ng add @progress/kendo-angular-charts
Data Groupby
以 time series 為例子，並透過 kendo 所提供的 groupBy 函式，將陣列資料做整理 (參考下方程式碼)。
timestamp 為 x 軸，value 為 y 軸，有時後在一個 chart 上會需要同時顯示兩種資料，所以透過 metric 欄位做 groupBy，可方便開發者切分資料。這個方式可以同時使用在一個 chart，或是多個 chart，是為筆者使用起來最為方便的做法。
const data = [{
timestamp: 1658303417000, metric: "cpu-total",
value: 5.87, },{
timestamp: 1658303417000,
metric: "usage_perc",
value: 10.99,
}];
constructor() {
const series = groupBy(data, [{ field: "metric" }]) as GroupResult[];
console.log(JSON.stringify(this.series, null, 2)); }
Console 取得的 Log 如下：
[{
aggregates: {},
field: "metric",
items: [{metric: "cpu-total", timestamp: 1658303417000, value: 5.87}],
value: "cpu-total"
},{
aggregates: {},
field: "metric",
items: [{metric: "usage_perc", timestamp: 1658303417000, value: 10.99}],
value: "usage_perc"
}]
Data Processing for Pane Definition
因為多個 chart 需透過 pane component，去定義每個 chart，所以我們需要在資料做一些加工，讓我們做 data binding 時可以識別不同 pane。我們利用 loop 的方式，將 groupBy 後的資料，額外加入一些欄位，以利我們做判斷。
- axe：判斷是否為同一個 chart。
- color：可以自訂線圖的顏色。
- Date：作為 x 軸。
[{
aggregates: {},
axe: "cpuAxis",
color: "red",
field: "metric",
items: [{metric: "cpu-total", timestamp: 1658303417000, value: 5.87, Date: new Date(1658303417000)}],
value: "cpu-total"
},{
aggregates: {},
axe: "memoryAxis",
color: "blue",
field: "metric",
items: [{metric: "usage_perc", timestamp: 1658303417000, value: 10.99, Date: new Date(1658303417000)}],
value: "usage_perc"
}]
Chart Configuration Example
Kendo charts 的使用，都是採用 components 的方式，組合出你想要的 chart 功能。例如您希望在 chart 中生成一個 legend，則需將該 component 放入即可。
<kendo-chart>
<kendo-chart-legend position="custom" [offsetX]="40" [offsetY]="25">
</kendo-chart-legend>
</kendo-chart>
Pane Configuration
pane 使用重點：
- 加入 kendo-chart-panes，定義當中 kendo-chart-pane 的 name 為識別名稱，對應 kendo-chart-value-axis 的 pane
- 加入 kendo-chart-value-axis，定義當中 kendo-chart-value-axis-item 的 pane 對應 kendo-chart-pane 的 name
- 加入 kendo-chart-value-axis，定義當中 kendo-chart-value-axis-item 的 name 對應 kendo-chart-series-item 的 axis
- 加入 kendo-chart-series-item，定義當中 axis 對應 kendo-chart-value-axis 的 name
其他常用設定：
- kendo-chart > pannable=true：可以框選 chart 中的區間。
- kendo-chart > zoomable=true：可以透過 mouse 去 zoom-in、out，或是透過 {mousewheel: { lock: ‘y’ }, selection: { lock: ‘y’ }}，鎖定 Y 軸。
- kendo-chart-legend > position=custom：透過 [offsetX]=”40″ [offsetY]=”25″ 自定義位置。
- kendo-chart-series-item > color = #FFFFFF：可調整線條顏色。
- kendo-chart-series-item > stack=true：將不同的線條做堆疊。
- kendo-chart-series-item > field=value：定義值的欄位。
- kendo-chart-series-item > categoryField =Date：定義 x 軸的類別欄位，範例為 Date 日期欄位。
- kendo-chart-series-item > type=line：定義線條類型，bar、column、area、line，等等。
- kendo-chart-category-axis-item：可以定義 x 軸的顯示格式，以及最多顯示數量 (maxDivisions)。
<kendo-chart [pannable]="true" [zoomable]="{ mousewheel: { lock: 'y' }, selection: { lock: 'y' } }">
<kendo-chart-legend position="custom" [offsetX]="40" [offsetY]="25">
</kendo-chart-legend>
<kendo-chart-pane-defaults>
<kendo-chart-pane-defaults-title font="700 18px sans-serif" position="center">
</kendo-chart-pane-defaults-title>
</kendo-chart-pane-defaults>
<kendo-chart-panes>
<kendo-chart-pane name="cpuPane" [clip]="false" title="cpu" [height]="150">
</kendo-chart-pane>
<kendo-chart-pane name="memoryPane" [clip]="false" title="memory" [height]="150">
</kendo-chart-pane>
</kendo-chart-panes>
<kendo-chart-value-axis>
<kendo-chart-value-axis-item name="cpuAxis" pane="cpuPane">
</kendo-chart-value-axis-item>
<kendo-chart-value-axis-item name="memoryAxis" pane="memoryPane">
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
<kendo-chart-series>
<kendo-chart-series-item axis="{{x.axe}}" [color]="x.color" *ngFor="let x of data" [stack]="true" opacity="0.5" [data]="x.items" field="value" categoryField="Date" type="line" [highlight]="{ visible: false }" [markers]="{ visible: false }">
<kendo-chart-series-item-tooltip>
<ng-template let-value="value">
{{x.value}}: {{ value }}
</ng-template>
</kendo-chart-series-item-tooltip>
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [labels]="{ format: 'HH:mm' }" [maxDivisions]="12">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
</kendo-chart>