色老板凸凹在线观看免费视频,精品国产免费久久久久久,亚洲人成手机

如何用LightningChart創(chuàng)建Android圖表數(shù)據(jù)可視化應(yīng)用程序？（下）

原創(chuàng)|行業(yè)資訊|編輯：何家巧|2022-12-30 16:44:41.197|閱讀 176 次

概述：?在上一篇，我們介紹了創(chuàng)建Android圖表數(shù)據(jù)可視化應(yīng)用程序的前部分，包括項(xiàng)目概況、開(kāi)發(fā)工具、環(huán)境參數(shù)等6部分，今天，我們分享后半部分，包括音頻譜圖、渲染速度圖表、蠟燭圖交易、運(yùn)用應(yīng)用程序4部分，希望對(duì)您有所幫助。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

相關(guān)鏈接：

LightningChart JS 是一款高性能的 JavaScript 圖表工具，專(zhuān)注于性能密集型、實(shí)時(shí)可視化圖表解決方案。

LightningChart .JS | 下載試用

在上一篇，我們介紹了創(chuàng)建Android圖表數(shù)據(jù)可視化應(yīng)用程序的前部分，包括項(xiàng)目概況、開(kāi)發(fā)工具、環(huán)境參數(shù)等6部分；今天，我們分享后半部分，包括音頻譜圖、渲染速度圖表、蠟燭圖交易、運(yùn)用應(yīng)用程序4部分，希望能夠?qū)δ兴鶐椭?/span>

八、音頻譜圖Android圖表
在查看代碼之前，值得一提的是，我們將用于 Android 數(shù)據(jù)可視化應(yīng)用程序的圖表之一將是頻譜圖。在這種情況下，此頻譜圖使用 LightningChart JS 功能SurfaceScrollingGridSeries。
此功能下的頻譜圖工作方式是將新樣本推入，同時(shí)將舊樣本移出。頻譜圖的作用是可視化音頻、振動(dòng)和其他類(lèi)型的頻譜。使用LightningChart JS 2D & 3D 音頻頻譜圖，用戶(hù)可以部署實(shí)時(shí)測(cè)量、分析和處理數(shù)據(jù)的應(yīng)用程序。
一個(gè)真實(shí)的行業(yè)案例場(chǎng)景將在例如振動(dòng)分析應(yīng)用程序中實(shí)現(xiàn)這種類(lèi)型的頻譜圖。在此處查看的完整說(shuō)明。

LightningChart JS 可以作為嵌入代碼工作，包裹在腳本標(biāo)簽中：

<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)
}

我們將在代碼的以下部分導(dǎo)入數(shù)據(jù)，如下所示：

// Load example data from file.
fetch(
    "http://lightningchart.com/lightningchart-js-interactive-examples/examples/assets/0913/audio2ch.json"
)

如果您需要加載本地?cái)?shù)據(jù)，您可以替換 [audio2ch.json] 文件的 URL：

當(dāng)活動(dòng)加載 HTML 時(shí)，將執(zhí)行所有 JavaScript 并將創(chuàng)建圖表對(duì)象。

九、渲染速度圖表

我們將為 Android 圖表應(yīng)用程序創(chuàng)建的第二個(gè)圖表是。特別是，這是一個(gè)以毫秒為單位測(cè)量時(shí)間跨度的 LineSeries 圖表。在此圖表中，我們渲染了 100 萬(wàn)個(gè)數(shù)據(jù)點(diǎn)。

對(duì)于此示例，我們將使用 XY 圖表類(lèi)型創(chuàng)建速度圖表。

<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” 中創(chuàng)建：

<script src="lcjs.iife.js"></script>

使用函數(shù) [addLineSeries]，將線添加到圖表中，使用 X 和 Y 的數(shù)據(jù)點(diǎn)，繪制一條線。。函數(shù) [addData] 將從類(lèi)[RenderingSpeedChart]中調(diào)用。

此類(lèi)將在活動(dòng)運(yùn)行時(shí)執(zhí)行，并將隨機(jī)浮點(diǎn)數(shù)發(fā)送到圖表：

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 + "')");
}
});
}
}

十、蠟燭圖交易

交易圖表將是我們將包含在數(shù)據(jù)可視化演示應(yīng)用程序中的最后一個(gè) Android 圖表示例。圖表獲取實(shí)時(shí)數(shù)據(jù)和特征：

高級(jí)語(yǔ)言中心
簡(jiǎn)單移動(dòng)平均線
指數(shù)移動(dòng)平均線
布林帶
體積
相對(duì)強(qiáng)度指數(shù)

對(duì)于此圖表，我們需要使用 xydata.iife 文件。該文件將包含為 OHCL 圖表創(chuàng)建 OHCL 數(shù)據(jù)的方法[createOHLCGenerator] 。OHLC 圖表顯示給定期間的開(kāi)盤(pán)價(jià)、最高價(jià)、最低價(jià)和收盤(pán)價(jià)：

<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

現(xiàn)在圖表對(duì)象已創(chuàng)建。外觀是通過(guò)[theme]屬性指定的。其他屬性，如坐標(biāo)軸的格式和樣式，由函數(shù)添加：

// 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 })

設(shè)置其他視覺(jué)屬性，如填充、文本標(biāo)題和網(wǎng)格。

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)
})

數(shù)據(jù)是通過(guò)執(zhí)行簡(jiǎn)單的乘法創(chuàng)建的，我們可以為頻率和跨度數(shù)據(jù)分配隨機(jī)值，但這取決于您需要多大的圖表。
對(duì)于此圖表，您將需要數(shù)據(jù)點(diǎn)的數(shù)量、數(shù)據(jù)頻率（兩個(gè)時(shí)間戳之間的時(shí)間有多長(zhǎng)）以及數(shù)據(jù)生成應(yīng)從哪里開(kāi)始的值。
十一、運(yùn)行應(yīng)用程序
有兩種方法可以執(zhí)行應(yīng)用程序：

使用安卓模擬器
將真實(shí)的 android 設(shè)備連接到 pc。

android 模擬器可能是最快的選擇，但您需要有足夠的 RAM 內(nèi)存和磁盤(pán)空間。
要配置虛擬設(shè)備，請(qǐng)轉(zhuǎn)到工具->設(shè)備管理器->創(chuàng)建設(shè)備：

然后只需選擇您需要的設(shè)備，下載并安裝它。

但如果您有 Android 設(shè)備，我建議您使用它……模擬器會(huì)降低您的計(jì)算機(jī)速度，并且您將無(wú)法測(cè)試所有功能。此外，某些功能可能無(wú)法在模擬器中正常運(yùn)行。
如果您想使用真實(shí)設(shè)備，則必須。之后，將手機(jī)連接到 PC，Android Studio 會(huì)將您的設(shè)備設(shè)置為“物理設(shè)備”。
您可以通過(guò)選擇下拉列表中可用的選項(xiàng)之一將您的實(shí)體手機(jī)連接到 Android studio，例如，使用 Wi-Fi：

在您的手機(jī)上，轉(zhuǎn)到開(kāi)發(fā)者選項(xiàng) > 無(wú)線調(diào)試 > 使用二維碼/配對(duì)碼配對(duì)并搜索“無(wú)線調(diào)試”。從那里，您可以使用 Android Studio 中的二維碼或配對(duì)代碼將手機(jī)與 Android Studio 配對(duì)，從而通過(guò) Wi-Fi 連接您的手機(jī)。

您的 Android Studio 應(yīng)用程序項(xiàng)目將像任何其他應(yīng)用程序一樣在您的手機(jī)上啟動(dòng)。這是最終結(jié)果。我使用的是三星設(shè)備，如您所見(jiàn)，Android 圖表應(yīng)用程序運(yùn)行流暢。

十一、結(jié)論

我想你應(yīng)該意識(shí)到了這個(gè)項(xiàng)目更側(cè)重于Android 配置，這樣也便于編程和編譯應(yīng)用程序。之所以這樣做，是因?yàn)殛P(guān)于移動(dòng)開(kāi)發(fā)最復(fù)雜的一點(diǎn)是擁有一個(gè)允許我們工作的配置環(huán)境。
您也應(yīng)該感受到了 Lightning Charts JS 的實(shí)現(xiàn)比配置 Android Studio 容易得多。
Lightning Chart JS 的開(kāi)發(fā)非常強(qiáng)調(diào)與不同開(kāi)發(fā)環(huán)境的兼容性和穩(wěn)定性。 JavaScript 代碼與 Node JS 版本相比沒(méi)有重大變化，在本次操作中我從字面上復(fù)制并粘貼了代碼，但是在 JAVA 代碼中，我們看到了一些如何與 JavaScript 和 JAVA 代碼交互、將數(shù)據(jù)發(fā)送到圖表的示例。

還以基本方式解釋了 android 活動(dòng)的行為。如果您是一位經(jīng)驗(yàn)不多的Android 開(kāi)發(fā)人員，希望本次操作對(duì)您有幫助。

歡迎加入LightningChart技術(shù)交流群，獲取最新產(chǎn)品咨詢(xún)：740060302

想了解Lightning Charts JS 購(gòu)買(mǎi)/授權(quán)/試用下載，歡迎咨詢(xún)。

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

上一篇：解決倉(cāng)庫(kù)產(chǎn)品管理痛點(diǎn)，選對(duì)條碼工具至關(guān)重要下一篇：如何用LightningChart創(chuàng)建Android圖表數(shù)據(jù)可視化應(yīng)用程序？（上）