Android 앱에 CanvasJS 차트를 추가하는 방법은 무엇입니까?

4070 단어 androidcanvasjswebview
Android WebView는 웹 URL을 열거나 html 데이터를 로드하는 데 사용되는 Android UI 위젯입니다. WebView는 Android 활동에서 웹 페이지를 표시하는 데 사용됩니다. 간단히 말해서 Android WebView는 웹 페이지를 표시하는 보기입니다. 이 자습서에서는 Android 앱에 CanvasJS charts을 추가하는 방법을 살펴보겠습니다.

1. Android Studio에서 새 프로젝트 만들기



빈 활동으로 새 프로젝트를 만듭니다.

2. 자산 폴더 추가 및 HTML 파일 생성



새로 생성된 앱에 asset 폴더를 추가하고 폴더에 html 파일을 생성합니다. "column chart.html"이라고 하겠습니다. html 파일에 다음 코드를 붙여넣습니다.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light1", // "light2", "dark1", "dark2"
animationEnabled: true, // change to true
title:{
text: "Basic Column Chart"
},
data: [{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple",  y: 10  },
{ label: "orange", y: 15  },
{ label: "banana", y: 25  },
{ label: "mango",  y: 30  },
{ label: "grape",  y: 28  }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="./canvasjs.min.js"></script>
</body>
</html>


자산 폴더에 canvasjs.min.js 파일을 다운로드하고 저장합니다. official download page에서 CanvasJS 라이브러리를 다운로드할 수 있습니다.

3. HTML 활동 만들기



기본적으로 android studio는 activity_main.xml을 생성합니다. 해당 파일의 코드를 webview로 레이아웃을 생성하는 아래 코드로 업데이트합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>


4. 활동 업데이트 및 HTML 파일 로드



MainActivity.java에서 webview용 JavaScript를 활성화하고 자산 폴더에 저장한 html 파일을 로드합니다.

package com.canvasjs.charts;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView canvasJSChartView = findViewById(R.id.webView);
        canvasJSChartView.setWebViewClient(new WebViewClient());

        canvasJSChartView.getSettings().setJavaScriptEnabled(true); //Enable Javascript for WebView


        canvasJSChartView.loadUrl("file:///android_asset/column chart.html");
    }
}


응용 프로그램을 실행해 봅시다. Android 스튜디오에서 앱을 실행하려면 프로젝트의 활동 파일 중 하나를 열고 기기(Android 기기를 컴퓨터에 연결한 경우)/에뮬레이터 기기를 선택한 다음 실행을 클릭합니다. 프로젝트를 실행하면 CanvasJS 세로 막대형 차트가 표시됩니다.



Github에서 샘플을 다운로드합니다.
저와 함께 React.Js를 수정하고 읽어보세요! (소개)
Flutter Intl 패키지 DateFormat 날짜를 일본어로 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage