您的位置:首页 > Web前端 > JavaScript

HelloCharts的折线图跟json数据交互

2016-07-06 09:22 471 查看
  第一次写博客,不知道写点什么好。最近在学图表的内容,学了HelloCharts这个开源框架,感觉真心不错,指的推荐。简单写一个折线图和json数据交互的例子,哪些地方写得不够好的希望大家可以指出来,希望可以大家学习,大家进步。



首先是一个简单的json数据

String json = "{\"Chart\": [{\"id\": \"2\",\"XPoint\": \"1\",\"YPoint\": \"24\"},{\"id\": \"1\",\"XPoint\": \"2\",\"YPoint\": \"55\"},\n" +

            "{\"id\": \"1\",\"XPoint\": \"3\",\"YPoint\": \"98\"},{\"id\": \"2\",\"XPoint\": \"4\",\"YPoint\": \"76\"},{\"id\": \"1\",\"XPoint\": \"6\",\"YPoint\": \"54\"},\n" +

            "{\"id\": \"2\",\"XPoint\": \"7\",\"YPoint\": \"12\"},{\"id\": \"1\",\"XPoint\": \"9\",\"YPoint\": \"55\"},{\"id\": \"2\",\"XPoint\": \"12\",\"YPoint\": \"76\"}]}";




在Xml文件里面定义图表:

<lecho.lib.hellocharts.view.LineChartView

    android:id="@+id/lineChartView"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_marginBottom="10dp"

    android:layout_marginTop="10dp"/>




解析json数据:

java.lang.reflect.Type type = new TypeToken<BasicResult<List<ChartValue>>>() {

}.getType();

BasicResult<List<ChartValue>> titlesList = gson

        .fromJson(json, type);

List<ChartValue> results = titlesList.getChart();

for(ChartValue value : results){

    mChartValuesList.add(value);

}




下面是为图表添加数据:
List<Line> lines = new ArrayList<Line>();

List<PointValue> mPointValue = new ArrayList<PointValue>();

for (int j = 0; j < mChartValuesList.size(); ++j) {
mPointValue.add(new PointValue(Float.parseFloat(mChartValuesList.get(j).XPoint), Float.parseFloat(mChartValuesList.get(j).YPoint)));

}

Line line = new Line(mPointValue);

line.setColor(ChartUtils.COLORS[0]);   //设置折线的颜色

line.setHasLabels(true);    //设置折点显示文本

lines.add(line);

data = new LineChartData(lines);

Axis axisX = new Axis();

Axis axisY = new Axis().setHasLines(true);

axisX.setName("Axis X");     //X轴的文字
aa82

axisY.setName("Axis Y");     //Y轴的文字

 

data.setAxisXBottom(axisX);     //设置X轴的文本的位置

data.setAxisYLeft(axisY);       //设置Y轴的文本的位置

data.setBaseValue(Float.NEGATIVE_INFINITY);

mLineChartView.setLineChartData(data);

这是资源的下载地址:http://download.csdn.net/detail/koma025/9568455
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息