Android 使用Webview控件来实现【数据图表(HTML+JS)】的显示
Android 使用Webview控件来实现【数据图表(HTML+JS)】的显示
首先在xml文件上界面布局
这边采用LinearLayour布局，首先添加一个webview控件来显示不同的数据图表，第二添加3个button控件来切换不同的数据图表
代码如下：
界面截图
第二步：在Mainactivity.java完成功能的实现
第一：绑定id
第三步：添加数据图表文件
第一：在main文件下创建一个assets文件夹
第二：在assets文件夹上添加（HTML+JS）文件
echarts.min.js文件可以从Echarts官网下载
这里直接贴出下载地址
之后根据情况编写我们的html文件
<html lang="en">
<head><meta charset="UTF-8" /><title>Android使用Echarts示例title>head><body>
<div id="main" style="width: 100%; height: 350px;">div>
<script src="./echarts.min.js">script>
<script type="text/javascript">
window.addEventListener("resize",function(){option.chart.resize();
});//初始化路径var myChart;/**require.config({paths: {echarts: './'}});**/// 通用属性定义var options = {title : {text : "Echart测试"},tooltip : {show : false},toolbox : {show : false},};function doCreatChart(type,jsondata){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts'},tooltip: {},legend: {data:['成绩']},xAxis: {data: ["数学","语文","英语","政治","物理","化学"]},yAxis: {},series: [{name: '成绩',type: type,data: jsondata}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}//doCreatChart('line',[89,78,77,66,44,55]);//docreateChart('bar',[89,78,77]);//docreateChart('pie',[89,78,77]);script>
body>html>
第四步：返回Mainactivity.java文件继续完成相关的操作
第一：开启脚本支持和开启本地文件读取
第二：定义一个类来实现加载webview时需要完成什么
在倒数第二个花括号定义
class MyWebviewClient extend WebViewClient
{
}
class MyWebviewClient extends WebViewClient{@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);w1.loadUrl("javascript:doCreatChart('line',[89,78,77,44,66,83]);");}}
第三：启动接口
第四:3个按钮的监听事件（切换数据图表）
如果需要在真机使用软件，请在（AndroidManifest.xml）中的application输入以下代码，防止真机对网络请求不了
android:usesCleartextTraffic="true"
下面是本项目的源代码
https://download.csdn.net/download/Scxioi0/12910993
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！