安卓图表

这是一篇让我非常兴奋的新文章……这一次，我们将创建一个 android 图表数据可视化应用程序。

对于此应用程序，我们将使用 Android Studio 和 LightningChart JS (IIFE)，但如果您不熟悉 android studio，在本文中，您将逐步完成创建 android 图表应用程序的整个实现。

请注意：

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

 现在，让我们开始吧。

项目概况

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

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

• 音频频谱图

• 渲染速度图表

• 交易蜡烛图

下载项目文件

Android 图表项目 (.ZIP)

设置Android Studio

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

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

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

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

开发工具包

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

Gradle

Gradle 是用于多语言软件开发的构建自动化工具。所以，Gradle对于移动应用来说会非常重要。您可以从此处获取和查看安装文档。

Gradle 安装基本上是将源文件复制到指定路径。

环境变量

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

然后，点击环境变量按钮：

现在您只需要添加带有 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 文件夹中发现一些 XML 文件：

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

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

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