使用 LightningChart JS创建 Android

安卓图表

这是一篇让我非常兴奋的新文章……这一次，我们将创建一个 android 图表数据可视化应用程序。对于此应用程序，我们将使用 Android Studio 和 LightningChart JS (IIFE)，但如果您不熟悉 android studio，在本文中，您将逐步完成创建 android 图表应用程序的整个实现。

请注意：我强烈建议安装本文中提到的所有工具，因为在接下来的文章和教程中，我们将使用 Ionic Capacitor 等其他框架，因此它们是构建移动应用程序所必需的。

现在，让我们开始吧。

LightningChart JS 拥有大量适用于 JS 的高性能 Android 图表库。 所有这些都可以在 Android 应用程序中使用，例如，您可以查看我们的 LightningChart JS GitHub 模板以了解更多信息。 今天，您将学习如何开发在 Android 设备上运行的应用程序。

此应用程序将包含三个图表：

• Audio Spectrogram Chart
• Rendering Speed Chart
• Trading Candle Sticks Chart

设置安卓Studio

Android Studio 是一个免费的 IDE，因此您将有机会在 Windows、macOS 和 Linux 上使用它。 你可以在这里下载 Android Studio。

安装非常简单，它是一个典型的“下一步”窗口，但如果你想查看官方 Android 文档，你可以从这里获取。 最后，转到 SDK 管理器并为 android 安装最新的平台：

您可以安装所需的所有平台，但我建议安装最新的平台，因为如果您想在 Google Play 控制台中发布 Android 图表应用程序，这是必须的要求。

要完成 Android Studio 的设置，请安装适用于 Android 的 SDK 工具。 您可以下载我展示的工具或选择您需要的工具。

Java SDK

下一件重要的事情是安装最新的 Java SDK。 对于此安装，您必须访问 Oracle 官方网站。 有必要创建一个帐户。

Gradle

Gradle 是用于多语言软件开发的构建自动化工具。 所以，Gradle对于移动应用来说会非常重要。 您可以从此处获取并查看安装文档。Gradle 安装基本上是将源文件复制到指定路径。

Environment Variables

有必要为 Android Studio、Java SDK 和 Gradle 创建环境变量。 您可以通过在 Windows 菜单中键入这些词来直接转到环境变量：

然后，点击【environment variables】按钮：

现在您只需要添加带有 android SDK 路径的变量：

现在，转到系统变量部分并编辑 [Path] 变量：

最后，只需添加 Java 路径和 Gradle 路径，然后在 Android Studio 中继续编写代码：

安卓项目

当android studio中打开app文件夹，会看到一棵这样的树：

现在，让我们看看每个文件夹的解释以及类与 HTML 文件之间的关系。

清单 - AndroidManifest.xml

每个应用程序项目都必须在项目源集的根目录下有一个 AndroidManifest.xml 文件。 清单文件向 Android 构建工具、Android 操作系统和 Google Play 描述了有关应用的基本信息。

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:roundIcon="@mipmap/ic_launcher_round"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<activity android:name=".RenderingSpeedChart" android:exported="false"></activity>

<activity android:name=".AudioSpectogramChart" android:exported="false"></activity>

<activity android:name=".TradingChart" android:exported="false"></activity>

<activity android:name=".MainActivity" android:exported="true">

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>

在清单中，我们需要指定将在我们的应用程序中呈现窗口的类。 如果您转到 java/lightningChart 文件夹，您将看到一些与我们在 android 清单中具有相同名称的文件/类。

这些名称应该与我们创建并要呈现的每个类相匹配。 manifest 文件是一个非常重要的文件，以后会用到这个文件来指定很多设置，比如深度链接属性。

Java/Lightningchart

在每个文件中，我们可以创建函数来验证、修改或创建要在窗口中显示的元素。 默认情况下，您会找到 [onCreate] 函数：

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_chart_display);

final Bundle bundle = getIntent().getExtras();

webView = findViewById(R.id.chartDisplayWebView);

webView.getSettings().setJavaScriptEnabled(true);

webView.loadUrl("file:///android_asset/AudioSpectogramChart.html");

}

[onCreate] 方法将在创建时调用。 换句话说，当我们点击一个引用特定活动的按钮时，[onCreate] 方法将被调用，在这个方法中我们可以加载一个 HTML 文件（这个文件可以作为一个 UI）。 在 [RenderingSpeedChart] 文件中，您将看到更多代码：

class DataTask extends TimerTask {

private WebView view;

private Random random;

DataTask(WebView view) {

this.view = view;

this.random = new Random();

}

@Override

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

}

});

}

}

[DataTask] 类将由 [onCreate] 方法调用。 此类将验证当前的 android 版本，并根据版本选择正确的方式来执行 javascript 函数。

  [addData] 函数位于正在加载的 HTML 文件中 (file:///android_asset/RenderingSpeed.html)。 我们正在访问 HTML 作为这个“控制器”的“视图”，使用 Android [WebView] 类：

  “WebView 对象允许您将 Web 内容显示为活动布局的一部分，但缺少完全开发的浏览器的某些功能。 当您需要增加对 UI 和高级配置选项的控制时，WebView 很有用，这些选项允许您将网页嵌入到专门为您的应用程序设计的环境中。”

Java/Lightningchart/MainActivity

MainActivity 将用作我们的 [main()] 方法。 该组件是用户启动应用程序时出现的第一个屏幕。 从这个文件中，我们将声明将执行我们的活动的方法。 这些方法可以通过按下一个 UI 对象来执行：

public void createRenderingSpeedChart(View view) {

Intent intent = new Intent(this, RenderingSpeedChart.class);

Bundle bundle = new Bundle();

bundle.putBoolean("useRandom", true);

intent.putExtras(bundle);

startActivity(intent);

}

public void createAudioSpectogramChart(View view) {

Intent intent = new Intent(this, AudioSpectogramChart.class);

Bundle bundle = new Bundle();

bundle.putBoolean("useRandom", true);

intent.putExtras(bundle);

startActivity(intent);

}

public void createTradingChart(View view) {

Intent intent = new Intent(this, TradingChart.class);

Bundle bundle = new Bundle();

bundle.putBoolean("useRandom", true);

intent.putExtras(bundle);

startActivity(intent); }

Layout

在创建新项目时，会在 Layout 文件夹中找到一些 XML 文件：

activity_main.xml作为默认接口工作，与我们 MainActivity 类相关。 如果打开该文件，您将看到一个包含每个图表按钮的设计器：

您可以在此处添加 UI 控件。 如果单击每个按钮，您将在窗口右侧看到属性面板。 在 [text] 属性中，可以设置要在应用程序中显示的文本。

在 [onClick] 属性中，可以指定将调用活动的方法的名称。 此方法应位于 MainActivity 类中。

Asset文件夹

在创建新项目时，我们会在 Layout 文件夹中找到一些 XML 文件：

在此文件夹中，您将找到将为活动加载的 HTML 文件。 此外，您还会找到一个 JSON 文件，其中包含频谱图的源数据。

IIFE.js 文件包含创建 LC JS 图表所需的所有函数和属性。 在之前的文章中，我们已经回顾了频谱图和渲染图。 在使用 Android 图表时，请随时查看以获取更多参考。

音频频谱图 Android 图表

在查看代码之前，用于 Android 数据可视化应用程序的图表之一是频谱图。 在这种情况下，此频谱图使用 LightningChart JS 功能 SurfaceScrollingGridSeries。

此功能下的频谱图的工作方式是将新样本推入，同时将旧样本移出。 频谱图的作用是可视化音频、振动和其他类型的频谱。 使用 LightningChart JS 2D 和 3D 音频频谱图，用户可以部署实时测量、分析和处理数据的应用程序。

一个真实的行业案例场景将在例如振动分析应用程序中实现这种类型的频谱图。 请在此处查看有关如何使用 TypeScript 和 LightningChart 创建振动图表应用程序的完整说明。

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(char

我们将在代码的以下部分导入数据，如下所示：

// Load example data from file.

fetch(

"https://lightningchart.com/lightningchart-js-interactive-examples/examples/assets/0913/audio2ch.json"

)

如果您需要加载本地数据，您可以替换 [audio2ch.json] 文件的 URL：

当活动加载 HTML 时，将执行所有 JavaScript 并将创建图表对象。

渲染速度 Android 图表

我们将为 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 图表

蜡烛图表将是我们将包含在数据可视化演示应用程序中的最后一个 Android 图表示例。 图表获取实时数据和特征：

• OHLC
• 简单移动平均线
• 指数移动平均线
• 布林带
• 体积
• 相对强度指数

对于此图表，我们需要使用 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] 属性指定的。 其他属性，如轴的格式和样式，由函数 [setTickStrategy] 添加：

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

})

设置其他视觉属性，如填充、文本标题和网格

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)

})

数据是通过执行简单的乘法创建的。 我们可以为频率和跨度数据分配随机值，但这取决于您需要多大的图表。对于此图表，您将需要数据点的数量、数据频率（两个时间戳之间的时间有多长）以及数据生成应从哪里开始的值。

运行应用程序

有两种方法可以执行应用程序：

1. 使用安卓模拟器
2. 将真实的 android 设备连接到 pc。

android 模拟器可能是最快的选择，但您需要有足够的 RAM 内存和磁盘空间。

要配置虚拟设备，请转到工具->设备管理器->创建设备：

然后只需选择您需要的设备，下载并安装它。

但是，如果您有 Android 设备，我建议您使用。模拟器会降低您的计算机速度，并且您将无法测试所有功能。 此外，某些功能可能无法在模拟器中正常运行。

如果您想使用真实设备，则必须激活手机上的开发人员选项。 之后，将手机连接到 PC，Android Studio 会将您的设备设置为“物理设备”。

您可以通过选择下拉列表中可用的选项之一将您的实体手机连接到 Android studio，例如，使用 Wi-Fi：

在您的手机上，转到开发者选项 > 无线调试 > 使用二维码/配对码配对并搜索“无线调试”。 从那里，您可以使用 Android Studio 中的二维码或配对代码将手机与 Android Studio 配对，从而通过 Wi-Fi 连接您的手机。

您的 Android Studio 应用程序项目将像任何其他应用程序一样在您的手机上启动。