欢迎大家观看我在CSDN学院录制的课程:http://edu.csdn.net/lecturer/944

百度echarts框架还是比较强大的,之前有尝试使用它,但毕竟主要使用于web网页端,效果不是很好,所以最终还是取消使用echarts

但之前在使用的过程中遇到些问题,虽然解决很简单,但也花了我不少时间,所以在这里记录之前如何使用及如何解决其中遇到的问题

1、在echarts官网下载demo

2、如果js代码没有很好的给一个函数入口,则自己提取封装

(1)原本已经提取封装好的函数保持不变

(2)js最开始执行的地方提取出来封装为一个函数,将其中的图形的数据变量作为函数的参数

(3)将html代码放到Android工程的assets目录下

(4)Android的布局这里就不多写了,直接加一个webview就行

(5)在Java代码中调用js,代码如下

//设置编码
mWebView.getSettings().setDefaultTextEncodingName("utf-8");
//支持js
mWebView.getSettings().setJavaScriptEnabled(true); //设置背景颜色 透明
mWebView.setBackgroundColor(Color.argb(, , , )); //载入js
// mWebView.loadUrl("file:///android_asset/echarts-kline.html");
mWebView.loadUrl("file:///android_asset/candlestick33.html"); mWebView.loadUrl("javascript:jsFunction('" + jsParam+ "')");

按照以往我们按照上面的形式调用js是没问题的,但我这里图形就是无法获取到数据,所以也图形也没有什么内容

想了好久,用很多方法尝试,数据是传过去了的,但为什么不显示呢。

自己也猜测:是不是页面图形框架还没加载好就已经执行了这段代码,等真正图形框架加载完需要传数据的时候,那段传数据的代码不再调用了,但Android端如何判断页面加载好呢,这也要看网速的吧

之后在一个群里一个热心好友跟我猜到一起了,但它知道如果是这个原因,可以试试什么方法,方法如下:

WebView可以实现一个onPageFinished的方法,顾名思义,应该就是当页面加载完后,我们再去调用js函数,这里只需要把调用js的那段代码放到如下代码中

mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
mWebView.loadUrl("javascript:jsFunction('" + jsParam+ "')");
super.onPageFinished(view, url);
} @Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});

本人文笔有限,有写的不好的地方还请包涵。

本人联系方式:

更多精彩分享,可关注我的微信公众号:

      微信打赏我请扫描下面的二维码:

微信号:WeixinJungle

              

邮箱:oneou6688@163.com

Android使用echarts框架的K线图的更多相关文章

  1. 基于Echarts的股票K线图展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...

  2. Android开源图表图形库K线图

    Android开源图表图形库K线图 web端k线图一般使用TradingView,android原生的一般是在MPAndroidChart 基础上做开发的,目前看到一个比较好的K线开源组件是KChar ...

  3. 功能分解——Android下画分时图与k线图有感

    最近工作极度繁忙,已经好久没有更新博客了,总感觉要是再不抽空总结总结点东西,分分钟就会被懒惰的状态给打到了.同时也希望同学们谨记,如果你已经决定要坚持某些正确的东西,比如背完某章单词,看一完本书抑或是 ...

  4. 使用ECharts画K线图

    需引入echarts.js插件,开发环境建议选择源代码版本,该版本包含了常见的警告和错误提示.下载地址 http://echarts.baidu.com/download.html 下面是代码,注释很 ...

  5. 百度 echarts K线图使用

    看个效果图先 首先在需要插入图例的HTML中嵌入 <div id="main" style="height:400px"></div> ...

  6. echarts画k线图

    var charset = echarts.init(document.getElementById("k_line")) $.get(k_line.url_A).done(fun ...

  7. android 股票K线图

    现在在手上的是一个证券资讯类型的app,其中有涉及到股票行情界面,行情中有K线图等,看到网上很多人在求这方面的资料,所以我特地写了一个demo在此处给大家分享一下. 下面是做出来的效果图: 这个 界面 ...

  8. 【带着canvas去流浪(5)】绘制K线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

  9. 高仿MT4行情终端(K线图+操控+简单架构)

    技术:VS2015 Update3 + QT 5.11.2 + BOOST 1.68 + QT VS Tools + C++11   概述 模仿外汇MT4的界面 详细 代码下载:http://www. ...

随机推荐

  1. servlet学习笔记_1

    一.动态页面和静态页面 动态页面&静态页面:如果浏览器在不同时刻不同条件下访问web服务器的某个页面,浏览器所获得的页面内容会发生变化,那么这种页面称之为动态页面.动态页面和静态页面的区别在于 ...

  2. JavaScript学习笔记及知识点整理_2

    1.一般而言,在Javascript中,this指向函数执行时的当前对象.举例如下: var someone = { name: "Bob", showName: function ...

  3. 从原理上理解NodeJS的适用场景

    NodeJS是近年来比较火的服务端JS平台,这一方面得益于其在后端处理高并发的卓越性能,另一方面在nodeJS平台上的npm.grunt.express等强大的代码与项目管理应用崛起,几乎重新定义了前 ...

  4. 关于Dagger 2 的使用方式

    什么是Dagger2 Dagger是为Android和Java平台提供的一个完全静态的,在编译时进行依赖注入的框架,原来是由Square公司维护,现在由Google维护. 我们知道Dagger是一个依 ...

  5. CSS 3 盒子属性

    #box1{ width: 100px;height: 40px; border: 1px solid black;(1)内容沾满盒子的处理方式 所有的都要添加前缀,以便更好的浏览器兼容  1,ove ...

  6. .AndroidRuntimeException: requestFeature() must be called before adding content

    有以下几种情况: 1. setContentView(R.layout.activity_list); requestWindowFeature(Window.FEATURE_NO_TITLE); 修 ...

  7. php注意事项

    1. 不要使用mysql_函数 这一天终于来了,从此你不仅仅"不应该"使用mysql_函数.PHP 7 已经把它们从核心中全部移除了,也就是说你需要迁移到好得多的mysqli_函数 ...

  8. Innodb引擎 compact模式下元组的磁盘存储结构

    可变字符串长度:可变字符串长度: null vector 元组头(5个字节) 主键 trx id (6个字节) rollback pointer( 7个字节 ) 可变字符串 可变字符串   有了这个后 ...

  9. Python爬虫:一些常用的爬虫技巧总结

    爬虫在开发过程中也有很多复用的过程,这里总结一下,以后也能省些事情. 1.基本抓取网页 get方法 import urllib2 url = "http://www.baidu.com&qu ...

  10. node.js基础 1之 URL网址解析的好帮手

    URL和URI的区别: URL是统一资源定位符 URI是统一资源标识符 URL是URI的子集(URL一定是URI,但URI不一定是URL) node中的URL中的url.parse protocol: ...