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

LightningChart .JS | 下載試用

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

一、項目概況

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

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

你可以安裝你需要的所有平臺，但我建議安裝最新的平臺，因為如果你想在 Google Play 控制臺中發(fā)布你的 Android 圖表應(yīng)用程序，這就是其中的一個要求。

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

三、開發(fā)工具

Gradle

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

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

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

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

五、安卓項目

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

每個應(yīng)用程序項目都必須在項目源集的根目錄下有一個 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>
        <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 清單中具有相同名稱的文件/類。 

在每個文件中，我們可以創(chuàng)建函數(shù)來驗證、修改或創(chuàng)建要在窗口中顯示的元素。 默認情況下，您會找到[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]方法，將在活動被創(chuàng)建時被調(diào)用。換句話說，當(dāng)我們點擊一個引用特定活動的按鈕時，[onCreate]方法將被調(diào)用，在這個方法中我們可以加載一個HTML文件（這個文件可以作為一個用戶界面）。在[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 + "')");
}
});
}
} 

[ addData]函數(shù)位于正在加載的 HTML 文件中 ( file:///android_asset/RenderingSpeed.html )。我們正在訪問 HTML 作為這個“控制器”的“視圖”，使用 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 將作為默認接口工作，它將與我們的 MainActivity 類相關(guān)。 如果打開該文件，您將看到一個包含每個圖表按鈕的設(shè)計器：

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

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

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

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