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

LightningChart .JS | 下載試用

本次我們將介紹如何使用Android Studio 和 LightningChart JS (IIFE)創(chuàng)建一個(gè) android 圖表數(shù)據(jù)可視化應(yīng)用程序。

一、項(xiàng)目概況

LightningChart JS 擁有大量適用于 JS 的高性能 Android 圖表庫，這些圖表庫都可以在 Android 應(yīng)用程序中使用，同時(shí)您也可以通過LightningChart JS GitHub 模板來了解更多信息。

• 音頻頻譜圖
• 渲染速度圖
• 蠟燭圖交易

你可以安裝你需要的所有平臺(tái)，但我建議安裝最新的平臺(tái)，因?yàn)槿绻阆朐?Google Play 控制臺(tái)中發(fā)布你的 Android 圖表應(yīng)用程序，這就是其中的一個(gè)要求。

下一件事情是安裝最新的 Java SDK。安裝這個(gè)SDK，您必須訪問Oracle 官方網(wǎng)站,而且需要?jiǎng)?chuàng)建一個(gè)帳戶。

三、開發(fā)工具

Gradle

然后，點(diǎn)擊【環(huán)境變量】按鈕：

現(xiàn)在您只需要添加帶有 android SDK 路徑的變量：

接下來需要轉(zhuǎn)到系統(tǒng)變量部分并編輯 [Path] 變量：

最后，只需添加 Java 路徑和 Gradle 路徑，然后在 Android Studio 中繼續(xù)編寫代碼：

五、安卓項(xiàng)目

現(xiàn)在，讓我們看看每個(gè)文件夾的解釋以及類與 HTML 文件之間的關(guān)系。

每個(gè)應(yīng)用程序項(xiàng)目都必須在項(xiàng)目源集的根目錄下有一個(gè) AndroidManifest.xml 文件。清單文件向 Android 構(gòu)建工具、Android 操作系統(tǒng)和 Google Play 描述了有關(guān)您的應(yīng)用的基本信息。

<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>
    &nbsp;   <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>

在清單中，我們需要指定將在我們的應(yīng)用程序中呈現(xiàn)窗口的類。 如果您轉(zhuǎn)到 java/lightningChart 文件夾，您將看到一些與我們在 android 清單中具有相同名稱的文件/類。 

在每個(gè)文件中，我們可以創(chuàng)建函數(shù)來驗(yàn)證、修改或創(chuàng)建要在窗口中顯示的元素。 默認(rèn)情況下，您會(huì)找到[onCreate]函數(shù)：

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]方法，將在活動(dòng)被創(chuàng)建時(shí)被調(diào)用。換句話說，當(dāng)我們點(diǎn)擊一個(gè)引用特定活動(dòng)的按鈕時(shí)，[onCreate]方法將被調(diào)用，在這個(gè)方法中我們可以加載一個(gè)HTML文件（這個(gè)文件可以作為一個(gè)用戶界面）。在[RenderingSpeedChart]文件里面，你會(huì)看到更多的代碼。

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

[ addData]函數(shù)位于正在加載的 HTML 文件中 ( file:///android_asset/RenderingSpeed.html )。我們正在訪問 HTML 作為這個(gè)“控制器”的“視圖”，使用 Android [WebView]類：

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

六、布局

activity_main.xml 將作為默認(rèn)接口工作，它將與我們的 MainActivity 類相關(guān)。 如果打開該文件，您將看到一個(gè)包含每個(gè)圖表按鈕的設(shè)計(jì)器：

您可以在此處添加 UI 控件。如果單擊每個(gè)按鈕，您將在窗口右側(cè)看到屬性面板。 在 [text] 屬性中，您可以設(shè)置要在應(yīng)用程序中顯示的文本。

IIFE.js 文件包含創(chuàng)建 LC JS 圖表所需的所有函數(shù)和屬性。在之前的文章中，我們已經(jīng)回顧了。在使用 Android 圖表時(shí)，請(qǐng)隨時(shí)查看它們以獲取更多參考。

今天關(guān)于“如何用LightningChart創(chuàng)建Android圖表數(shù)據(jù)可視化應(yīng)用程序”第一部分的介紹到這里了，點(diǎn)擊查看LightningChart系列教程。

想要了解或購買LightningChart 正版授權(quán)的朋友，歡迎咨詢。