翻譯|使用教程|編輯:吳園園|2020-03-17 09:36:22.833|閱讀 301 次
概述:此示例顯示了一個(gè)簡(jiǎn)單的儀表板,其中包含多種圖表類型和LegendBox面板。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
LightningChart JS是Web上性能最高的圖表庫(kù)具有出色的執(zhí)行性能 - 使用高數(shù)據(jù)速率同時(shí)監(jiān)控?cái)?shù)十個(gè)數(shù)據(jù)源。 GPU加速和WebGL渲染確保您的設(shè)備的圖形處理器得到有效利用,從而實(shí)現(xiàn)高刷新率和流暢的動(dòng)畫。非常適合用于貿(mào)易,工程,航空航天,醫(yī)藥和其他領(lǐng)域的應(yīng)用。
點(diǎn)擊下載LightningChart JS最新試用版
帶有LegendBox的儀表板
儀表板允許使用最少的內(nèi)存資源高效地在單個(gè)視口中渲染多個(gè)場(chǎng)景。在創(chuàng)建儀表板實(shí)例的過(guò)程中,必須指定行和列的數(shù)量。此后無(wú)法更改。
// Create a dashboard with three rows and two columns. const dashboard = lightningChart().Dashboard({ numberOfRows: 3, numberOfColumns: 2 })然后可以將圖表和面板添加到儀表盤,如下所示:
// Create a ChartXY that occupies the top row of the dashboard. const chartXY = dashboard.createChartXY({ // Row index (starting from bottom). columnIndex: 2, // Column index (starting from left). rowIndex: 0, // Row span (height, basically). columnSpan: 1, // Column span (width, basically). rowSpan: 2 })
儀表板具有用于添加不同種類的圖表或面板的單獨(dú)方法。儀表板代表具有行和列的網(wǎng)格。在創(chuàng)建元素期間,應(yīng)指定行和列索引以及水平和垂直跨度,以將其放置在正確的位置并填充所需數(shù)量的單元格。
// Create a spider chart and attach to dashboard. // Row 0, Column 0, Rows to fill 2, Columns to fill 1. const spiderChart = dashboard.createSpider( 0, 0, 2, 1 ) // Create a Legend Box Panel and attach to dashboard. // Row 0, Column 1, Rows to fill 2, Columns to fill 1. const legendBox = dashboard.createLegendBoxPanel( { columnIndex: 0, rowIndex: 1, columnSpan: 2, rowSpan: 1 })儀表板的行和列可以分別具有不同的高度和寬度-您可以通過(guò)單擊并拖動(dòng)將列和行彼此分開的網(wǎng)格線或使用編程方式設(shè)置它們的方法來(lái)調(diào)整它們的大小:
// Set height of the first row of a dashboard. // By default each row and column has a size of 1. // The size is always relative to the combined size of each row / column. dashboard.setRowHeight( 0, 2 ) // Set width of the first and the second column of a dashboard. // First column width will be 2/5 of the entire view's width. dashboard.setColumnWidth( 0, 2 ) // Second column width will be 3/5 of the entire view's width. dashboard.setColumnWidth( 1, 3 )
=====================================================
如果你想LightningChart JS應(yīng)用于商業(yè)用途,歡迎。
關(guān)注下方的微信公眾號(hào),及時(shí)獲取產(chǎn)品最新資訊▼▼▼
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自: