Telerik｜Kendo angular using panes to synchronize multiple chart

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 使用重點：

1. 加入 kendo-chart-panes，定義當中 kendo-chart-pane 的 name 為識別名稱，對應 kendo-chart-value-axis 的 pane
2. 加入 kendo-chart-value-axis，定義當中 kendo-chart-value-axis-item 的 pane 對應 kendo-chart-pane 的 name
3. 加入 kendo-chart-value-axis，定義當中 kendo-chart-value-axis-item 的 name 對應 kendo-chart-series-item 的 axis
4. 加入 kendo-chart-series-item，定義當中 axis 對應 kendo-chart-value-axis 的 name

其他常用設定：

1. kendo-chart > pannable=true：可以框選 chart 中的區間。
2. kendo-chart > zoomable=true：可以透過 mouse 去 zoom-in、out，或是透過 {mousewheel: { lock: 'y' }, selection: { lock: 'y' }}，鎖定 Y 軸。
3. kendo-chart-legend > position=custom：透過 [offsetX]="40" [offsetY]="25" 自定義位置。
4. kendo-chart-series-item > color = #FFFFFF：可調整線條顏色。
5. kendo-chart-series-item > stack=true：將不同的線條做堆疊。
6. kendo-chart-series-item > field=value：定義值的欄位。
7. kendo-chart-series-item > categoryField =Date：定義 x 軸的類別欄位，範例為 Date 日期欄位。
8. kendo-chart-series-item > type=line：定義線條類型，bar、column、area、line，等等。
9. 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>