android折線圖ichartjs的動態載入資料
阿新 • • 發佈：2018-12-31
之間給大家分享過一個html寫的折線圖，再將折線圖利用webview放在手機中，原來的那個折線圖中的x軸座標在html中已經被寫死，這樣就帶來了操作的不變，程式碼的靈活性也隨之降低。比如，我需要檢視今天的溫度，可是現在是晚上7點，今天還沒有過完，那麼問題來了，怎麼才能動態的載入這些圖的資料呢？
經過查詢資料和網上的研究，現在再來和大家分享一下。
做出來的效果和上一篇是一樣的，只不過這個是動態的載入資料。
我們先需要一個折線圖的資料類，就叫它ChartData類吧，在這個類中，定義了折線圖折線的名字，x座標所對應的值和折線的顏色。來看下程式碼：
public class ChartData {
String name;
double 還需要一個類，用來設定折線圖的標題，長度和寬度，當然啦，兩個類合在一起也是可以的。程式碼如下：
public class ChartParameter {
String title;
int width, height;
public void setTitle(String title) {
this 還需要一個類用於將資料變成json陣列，然後跟html進行互動。
public class JsonPram {
public static String PackagePostData(Vector<ChartData> chartdata) {
JSONArray root = new JSONArray();
try{
for(int i = 0; i < chartdata.size(); i++) {
JSONObject temp = new JSONObject();
temp.put("name", chartdata.get(i).getName());
temp.put("value", chartdata.get(i).getValues());
temp.put("color", chartdata.get(i).getColor());
root.put(temp);
System.out.println(temp);
}
} catch (JSONException e) {
e.printStackTrace();
return null;
}
return root.toString();
}
public static String LabelData(Vector<ChartData> chartdata) {
JSONArray root = new JSONArray();
try{
for(int i = 0; i < chartdata.size(); i++) {
JSONObject temp = new JSONObject();
temp.put("name", chartdata.get(i).getName());
JSONArray values = new JSONArray();
for(int j = 0; j < chartdata.get(i).getValues().length; j++){
values.put(chartdata.get(i).getValues()[j]);
}
temp.put("value", values);
temp.put("color", chartdata.get(i).getColor());
root.put(temp);
}
} catch(JSONException e) {
e.printStackTrace();
return null;
}
return root.toString();
}
public static String DataLabels(String[] datalabels) {
JSONArray root = new JSONArray();
try{
for(int i = 0; i < datalabels.length; i++) {
root.put(datalabels[i]);
}
} catch (Exception e) {
e.printStackTrace();
return null;
}
return root.toString();
}
}主類的程式碼如下：
public class MyChartActivity extends Activity {
private WebView web;
private String chart_data_json,data_labels;
private Vector<ChartData> chart_data = new Vector<ChartData>();
ChartParameter chartparameter = new ChartParameter();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
initData();
initparmeter();
chart_data_json = JsonPram.LabelData(chart_data);
data_labels = JsonPram.DataLabels(new String[]{"0","2","4","6","8","10","12","14","16"});
System.out.println(chart_data_json);
web = (WebView) this.findViewById(R.id.web);
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setUseWideViewPort(true);
// web.getSettings().setSupportZoom(true);
// 設定是否可縮放
// web.getSettings().setBuiltInZoomControls(true);
web.getSettings().setLoadWithOverviewMode(true);
web.addJavascriptInterface(this, “chart_data_json”);//與html的介面，傳遞圖表中的資料
web.addJavascriptInterface(chartparameter, “chart_parameter”);//傳遞的是圖表的標題、寬度和高度
web.loadUrl(“file:///android_asset/JS.html”);
}
/**
* 在JS.html中呼叫該函式，將chart_data_json的數值傳過去
* @return
*/
public String getContacts() {
return chart_data_json;
}
/**
* 傳遞橫座標的刻度值
* @return
*/
public String getDataLabels() {
return data_labels;
}
/**
* 沒用到，作用是在JS.html中呼叫，傳遞引數
* @return
*/
public JavaArrayJSWrapper getContact() {
ChartData[] a = new ChartData[this.chart_data.size()];
a = this.chart_data.toArray(a);
return new JavaArrayJSWrapper(a);
}
/**
* 初始化圖示的資料
*/
public void initData() {
ChartData charttest = new ChartData();
charttest.setName("IE");
charttest.setValues(new double[]{4,16,18,20,32,36,38,31,28});
charttest.setColor("#1f7e92");
chart_data.add(charttest);
}
/**
* 初始化標題、寬度和高度
*/
public void initparmeter() {
chartparameter.setTitle("大棚每日溫度情況");
chartparameter.setWidth(1100);
chartparameter.setHeight(600);
}
public void debugout(String info) {
Log.i("TAG",info);
System.out.println(info);
}
}
裡面也都有註釋，需要的朋友可以自己看下，還有個html的程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK"/>
<title>ichartjs</title>
<meta http-equiv="keywords" content="ichartjs demo,Html5 demo,ichart demo"></meta>
<meta http-equiv="description" content="The ichartjs's gallery center,ichartjs"></meta>
<script type="text/javascript" src="ichart-1.0.min.js"></script>
<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
<script type="text/javascript">
$(function () {
var data;
var data_labels;
window.chart_data_json.debugout("inside js onload");
var chartDataJson = window.chart_data_json.getContacts();
var dataLabels = window.chart_data_json.getDataLabels();
window.chart_data_json.debugout(chartDataJson);
eval('data=' + chartDataJson);//eval作用是將外部傳進來的String資料作為本地js資料，並執行
eval('data_labels=' + dataLabels);
var chart_title = window.chart_parameter.getTitle();
window.chart_data_json.debugout(chart_title);
var chart_width = window.chart_parameter.getWidth();
window.chart_data_json.debugout(chart_width);
var chart_height = window.chart_parameter.getHeight();
window.chart_data_json.debugout(chart_height);
new iChart.Area2D({
render: 'canvasDiv',
data: data,
title: {
text: chart_title,
height: 60,
font: '微軟雅黑',
color: '#1f7e92',
fontsize: 44
},
width: chart_width,
height: chart_height,
area_opacity: 0.15,
//開啟動畫效果
animation: true,
// legend : {
// enable : true
// },
// tip:{
// enable : true
// },
sub_option: {
smooth: true,
label: {fontsize: 25,color: '#1f7e92'},
point_size: 14
},
subtitle: {
text: '單位:攝氏度',//利用副標題設定單位資訊
fontsize: 25,
color: '#1f7e92',
textAlign: 'left'
},
coordinate: {
//座標的屬性
axis: {
width: [0, 0, 2, 2]
},
background_color: '#ffffff',
height: '90%',
valid_width: '94%',
height: 260,
scale2grid: false,
//橫線
grids: {
horizontal: {
way: 'share_alike',
value: 5
}
},
scale:[{
position:'left',
start_scale:0,
end_scale:50,
scale_space:10,
label:{color:'#1f7e92',font:'微軟雅黑',fontsize:25,fontweight:400}
},{
position:'bottom',
start_scale:1,
end_scale:12,
label:{color:'#1f7e92',font:'微軟雅黑',fontsize:25,fontweight:400},
labels: data_labels
}]
}
}).draw();
});
</script>
</head>
<body>
<div id='canvasDiv'></div>
</body>
</html>