liucheng's blog

遇到一个项目需要展现统计图表功能。

通过网络找到一个很好用的JS开源项目RGraph，可以满足我展现图表的需求。不过遇到了一个小问题，因为该项目除了和服务器端进行数据通信外，并没有应用服务进行提供。

考虑的解决方案就是，在Webview中通过JSON来实现与JS脚本的数据通信，来达到本地动态展现统计图表的功能。

实现思路如下：

首先在页面加载的时候调用Android的Webview类方法：

window.onload = function ()
{
window.demo.clickOnAndroid();
}

在Webview中使用JAVA实现该JS方法：

mWebView.addJavascriptInterface(new Object() {
public void clickOnAndroid() {
mHandler.post(new Runnable() {
public void run() {
String jsonText = “{ \”arguments\” : [0,300,500,600,100,200,400,500,700,800,400,100]}”;

mWebView.loadUrl(“javascript:wave(” + jsonText + “);”);
}
});
}
}, “demo”);

然后在JS中实现wave（）方法来接收数据并将数据展现在统计图表中，代码如下：

function wave(data) {
var data1=data.arguments;

var line4 = new RGraph.Line(‘line4′, data1,
[500,400,500,700,300,300,500,600,700,800,600,300],
[400,200,400,500,300,300,400,500,400,100,400,300]);
line4.Set(‘chart.key’, ['2008', '2007', '2006']);
line4.Set(‘chart.key.background’, ‘white’);
line4.Set(‘chart.key.shadow’, true);
line4.Set(‘chart.key.shadow.offsetx’, 0);
line4.Set(‘chart.key.shadow.offsety’, 0);
line4.Set(‘chart.key.shadow.blur’, 15);
line4.Set(‘chart.key.shadow.color’, ‘#ccc’);
line4.Set(‘chart.key.rounded’, true);
line4.Set(‘chart.gutter’, 45);

line4.Set(‘chart.filled’, true);
line4.Set(‘chart.tickmarks’, null);
line4.Set(‘chart.background.barcolor1′, ‘white’);
line4.Set(‘chart.background.barcolor2′, ‘white’);
line4.Set(‘chart.background.grid.autofit’, true);
line4.Set(‘chart.title’, ‘A line chart’);
line4.Set(‘chart.colors’, ['rgba(169, 222, 244, 0.7)', 'red', '#ff0']);
line4.Set(‘chart.fillstyle’, ['#daf1fa', '#faa', '#ffa']);
line4.Set(‘chart.labels’, ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
line4.Set(‘chart.text.angle’, 45);
line4.Set(‘chart.yaxispos’, ‘right’);
line4.Set(‘chart.linewidth’, 5);
line4.Set(‘chart.height’, 250);
line4.Draw();
}

html中的代码如下:

<div>
<canvas id=”line4″ width=”320″ height=”680″>[Please wait...]</canvas>
</div>

最终效果如图所示：

其中蓝色线为传入的数据展现。