LightningChart JS 是一款高性能的 JavaScript 圖表工具，專注于性能密集型、實時可視化圖表解決方案。
LightningChart .JS | 下載試用
在上一篇，我們介紹了創建Android圖表數據可視化應用程序的前部分，包括項目概況、開發工具、環境參數等6部分；今天，我們分享后半部分，包括音頻譜圖、渲染速度圖表、蠟燭圖交易、運用應用程序4部分，希望能夠對您有所幫助。
八、音頻譜圖Android圖表
在查看代碼之前，值得一提的是，我們將用于 Android 數據可視化應用程序的圖表之一將是頻譜圖。在這種情況下，此頻譜圖使用 LightningChart JS 功能SurfaceScrollingGridSeries。
此功能下的頻譜圖工作方式是將新樣本推入，同時將舊樣本移出。頻譜圖的作用是可視化音頻、振動和其他類型的頻譜。使用LightningChart JS 2D & 3D 音頻頻譜圖，用戶可以部署實時測量、分析和處理數據的應用程序。
一個真實的行業案例場景將在例如振動分析應用程序中實現這種類型的頻譜圖。在此處查看的完整說明。
LightningChart JS 可以作為嵌入代碼工作，包裹在腳本標簽中：
<body class="box">
<!-- Create div to render the chart into-->
<div id="target" class="row content"></div>
<!--IIFE assembly (lcjs.iife.js) is a standalone JS file,
which does not need any build tools,
such as NPM, to be installed-->
<!--Script source must be defined in it's own script tag-->
<script src="lcjs.iife.js"></script>
<!--Actual chart related script tag-->
<script>
function setData(data){
var arrData = data.split("||")
const ArrX = JSON.parse(arrData[0])
const ArrY = JSON.parse(arrData[1])
const chartData = ArrX.map( ( itr1, itr2 ) => ( { x: itr1, y: ArrY[itr2] } ) )
lineSeries.add(chartData)
}
我們將在代碼的以下部分導入數據，如下所示：
// Load example data from file.
fetch(
"http://lightningchart.com/lightningchart-js-interactive-examples/examples/assets/0913/audio2ch.json"
)
如果您需要加載本地數據，您可以替換 [audio2ch.json] 文件的 URL：
當活動加載 HTML 時，將執行所有 JavaScript 并將創建圖表對象。
九、渲染速度圖表
我們將為 Android 圖表應用程序創建的第二個圖表是。特別是，這是一個以毫秒為單位測量時間跨度的 LineSeries 圖表。在此圖表中，我們渲染了 100 萬個數據點。
對于此示例，我們將使用 XY 圖表類型創建速度圖表。
<script>
let curX = 1;
function addData(valueFromJava){
const value = Number(valueFromJava)
lineSeries.add({x: curX, y: value})
curX += 1
}
// Extract required parts from LightningChartJS.
const {
lightningChart
} = lcjs //Note: @arction/lcjs is not needed here, when using IIFE assembly
// Create a XY Chart.
chart = lightningChart().ChartXY({
// Set the chart into a div with id, 'target'.
// Chart's size will automatically adjust to div's size.
container: 'target'
})
.setTitle('My first chart') // Set chart title
// Add a line series.
const lineSeries = chart.addLineSeries()
.setName('My data')
.setStrokeStyle(s=>s.setThickness(2))
</script>
圖表將在 div “target” 中創建：
<script src="lcjs.iife.js"></script>
使用函數 [addLineSeries]，將線添加到圖表中，使用 X 和 Y 的數據點，繪制一條線。。函數 [addData] 將從類[RenderingSpeedChart]中調用。
此類將在活動運行時執行，并將隨機浮點數發送到圖表：
public void run() {
// Generate random float to show
float f = random.nextFloat();
final String data = Float.toString(f);
// send the generated data to the WebView
// method for sending depends on Android version
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
view.post(new Runnable() {
@Override
public void run() {
view.evaluateJavascript("addData('" + data + "')", null);
}
});
} else {
view.post(new Runnable() {
@Override
public void run() {
view.loadUrl("javascript:addData('" + data + "')");
}
});
}
}
十、蠟燭圖交易
交易圖表將是我們將包含在數據可視化演示應用程序中的最后一個 Android 圖表示例。圖表獲取實時數據和特征：
-
高級語言中心
-
簡單移動平均線
-
指數移動平均線
-
布林帶
-
體積
-
相對強度指數
對于此圖表，我們需要使用 xydata.iife 文件。 該文件將包含為 OHCL 圖表創建 OHCL 數據的方法[createOHLCGenerator] 。OHLC 圖表顯示給定期間的開盤價、最高價、最低價和收盤價：
<script src="lcjs.iife.js"></script>
<script src="xydata.iife.js"></script>
<!--Actual chart related script tag-->
<script>
// Extract required parts from LightningChartJS.
const {
lightningChart,
AxisTickStrategies,
OHLCFigures,
emptyLine,
AxisScrollStrategies,
Themes
} = lcjs
// Import data-generator from 'xydata'-library.
const {
createOHLCGenerator
} = xydata
現在圖表對象已創建。 外觀是通過[theme]屬性指定的。 其他屬性，如坐標軸的格式和樣式，由函數添加：
// Create a XY Chart.
const chart = lightningChart().ChartXY({
theme: Themes.darkGold,
})
// Use DateTime X-axis using with above defined origin.
chart
.getDefaultAxisX()
.setTickStrategy(
AxisTickStrategies.DateTime,
(tickStrategy) => tickStrategy.setDateOrigin(dateOrigin)
)
chart.setTitle('Candlesticks Chart')
// Style AutoCursor using preset.
chart.setAutoCursor(cursor => {
cursor.disposeTickMarkerY()
cursor.setGridStrokeYStyle(emptyLine)
})
chart.setPadding({ right: 40 })
設置其他視覺屬性，如填充、文本標題和網格。
const dataSpan = 10 * 24 * 60 * 60 * 1000
const dataFrequency = 1000 * 60
createOHLCGenerator()
.setNumberOfPoints(dataSpan / dataFrequency)
.setDataFrequency(dataFrequency)
.setStart(100)
.generate()
.toPromise()
.then(data => {
series.add(data)
})
數據是通過執行簡單的乘法創建的，我們可以為頻率和跨度數據分配隨機值，但這取決于您需要多大的圖表。
對于此圖表，您將需要數據點的數量、數據頻率（兩個時間戳之間的時間有多長）以及數據生成應從哪里開始的值。
十一、運行應用程序
有兩種方法可以執行應用程序：
-
使用安卓模擬器
-
將真實的 android 設備連接到 pc。
android 模擬器可能是最快的選擇，但您需要有足夠的 RAM 內存和磁盤空間。
要配置虛擬設備，請轉到工具->設備管理器->創建設備：
然后只需選擇您需要的設備，下載并安裝它。
但如果您有 Android 設備，我建議您使用它……模擬器會降低您的計算機速度，并且您將無法測試所有功能。 此外，某些功能可能無法在模擬器中正常運行。
如果您想使用真實設備，則必須。 之后，將手機連接到 PC，Android Studio 會將您的設備設置為“物理設備”。
您可以通過選擇下拉列表中可用的選項之一將您的實體手機連接到 Android studio，例如，使用 Wi-Fi：
在您的手機上，轉到開發者選項 > 無線調試 > 使用二維碼/配對碼配對并搜索“無線調試”。從那里，您可以使用 Android Studio 中的二維碼或配對代碼將手機與 Android Studio 配對，從而通過 Wi-Fi 連接您的手機。
您的 Android Studio 應用程序項目將像任何其他應用程序一樣在您的手機上啟動。這是最終結果。我使用的是三星設備，如您所見，Android 圖表應用程序運行流暢。
十一、結論
我想你應該意識到了這個項目更側重于Android 配置，這樣也便于編程和編譯應用程序。 之所以這樣做，是因為關于移動開發最復雜的一點是擁有一個允許我們工作的配置環境。
您也應該感受到了 Lightning Charts JS 的實現比配置 Android Studio 容易得多。
Lightning Chart JS 的開發非常強調與不同開發環境的兼容性和穩定性。 JavaScript 代碼與 Node JS 版本相比沒有重大變化，在本次操作中我從字面上復制并粘貼了代碼，但是在 JAVA 代碼中，我們看到了一些如何與 JavaScript 和 JAVA 代碼交互、將數據發送到圖表的示例。
還以基本方式解釋了 android 活動的行為。 如果您是一位 經驗不多的Android 開發人員，希望本次操作對您有幫助。
歡迎加入LightningChart技術交流群，獲取最新產品咨詢：740060302
想了解Lightning Charts JS 購買/授權/試用下載，歡迎咨詢。
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
5次
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線