文章分類/

Telerik|Kendo angular using panes to synchronize multiple chart

3 次瀏覽

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>

快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊