Android 一款多条折线与柱状图共存图表


当前框架版本 MoreLineAndBarChart 1.0.10

废话不多说,先上效果图,本框架提供图表组合实现,集成之后你可以实现:

图一.png
图二.png
图三.png
图四.png

图五.png

图六.png

  • 显示柱状图表(图一)
  • 显示多条折线图(图二)
  • 显示单条折线图(图三)
  • 显示折线图每个点,以及设置实心空心(图四)
  • 柱状图和多条折线图一起显示(图五)
  • 显示所有效果(图六)

简单使用

1. 首先在项目中添加 jitpack.io 库

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

2. 然后在项目中添加依赖

dependencies {
	        implementation 'com.github.leo2777:MoreLineAndBarChart:1.0.9'
	}
 
3. 在想要实现的布局当中添加控件

  <leo.work.morelineandbarchart.chart.MoreLineAndBarChart
        android:id="@+id/main_chart"
        android:layout_width="match_parent"
        android:layout_height="300dp"/>

4. 绑定控件之后即可设置数据


        moreLineAndBarChart=findViewById(R.id.main_chart);
	
	
        //.......
	
	//设置假数据
	Random random=new Random();
        List<Float> value1=new ArrayList<>();
        List<Float> value2=new ArrayList<>();
        List<Float> value3=new ArrayList<>();
        List<Float> barValue=new ArrayList<>();
        List<String > bottomValue=new ArrayList<>();
        for (int i=0;i<5;i++){
            value1.add((float) random.nextInt(60));
            value2.add((float) random.nextInt(40));
            value3.add((float) random.nextInt(5));
            barValue.add((float) random.nextInt(50));
            bottomValue.add("指标");
        }
	
	
        moreLineAndBarChart.setBottomValues(bottomValue);//设置底部数据
        moreLineAndBarChart.setLinesData(value1,value2,value3);//设置折线图数据,
        moreLineAndBarChart.setBarChartValues(barValue);//设置柱状图数据
        moreLineAndBarChart.setLinesColors(Color.BLUE,Color.YELLOW,Color.RED);//设置折线的颜色,不设置会有默认,但是一旦设置需和上面的折线图的条数一样。
        moreLineAndBarChart.setLineWidth(4f);//设置折线图宽度

        moreLineAndBarChart.setDrawPoint(true);//绘制点
        moreLineAndBarChart.setSolid(true);//设置是否空心,搭配绘制点
        moreLineAndBarChart.setDrawBar(true);//设置是否绘制柱状图,不添加柱状图数据也有同样效果
        moreLineAndBarChart.setShowGrid(true);//是否绘制表格线,目前只有横向分割线
        moreLineAndBarChart.setShowLineValue(true);//是否显示折线图每个点的数值(当点太多的时候不生效)

        //.......等等,具体看下方

        //设置完数据之后调用刷新,否则不生效。
        moreLineAndBarChart.invalidateChart();




进阶使用

1. 可以直接在布局文件当中设置需要的属性

    <leo.work.morelineandbarchart.chart.MoreLineAndBarChart
        android:id="@+id/main_chart"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:chart_is_slide_point="true"
        app:chart_bottom_text_color="@color/colorPrimary"
        app:chart_is_show_grid="true"
        app:chart_bottom_padding="10dp"
        app:chart_line_size="1dp"/>


2. 框架内可以设置的属性


    //左边显示的指标数
        <attr name="chart_left_index_num" format="integer"/>


        //左边指数的字体大小
        <attr name="chart_left_index_text_size" format="dimension"/>
        //下方指标的字体大小
        <attr name="chart_bottom_text_size" format="dimension"/>
        //中间某一点的值具体大小
        <attr name="chart_center_text_size" format="dimension"/>
        //折线图线的大小
        <attr name="chart_line_size" format="dimension"/>
        //表格分割线具体大小
        <attr name="chart_grid_size" format="dimension"/>
        //底部线的具体大小
        <attr name="chart_bottom_line_size" format="dimension"/>
        //左边指标的距离
        <attr name="chart_left_index_padding" format="dimension"/>
        //图表上方的距离
        <attr name="chart_chart_top_padding" format="dimension"/>
        //图表下方的距离
        <attr name="chart_bottom_padding" format="dimension"/>




        //左边指标的具体颜色
        <attr name="chart_left_index_text_color" format="color"/>
        //中间值的颜色
        <attr name="chart_center_index_text_color" format="color"/>
        //下方指标的颜色
        <attr name="chart_bottom_text_color" format="color"/>
        //柱状图的颜色
        <attr name="chart_bar_color" format="color"/>
        //分割线的颜色
        <attr name="chart_grid_color" format="color"/>
        //底部线的颜色
        <attr name="chart_bottom_line_color" format="color"/>
        //折线的颜色
        <attr name="chart_line_color" format="color"/>
        //图表的背景颜色
        <attr name="chart_background_color" format="color"/>
        //中心点的颜色(点为空心)
        <attr name="chart_line_point_center_color" format="color"/>




        //是否显示柱状图
        <attr name="chart_is_show_bar_chart" format="boolean"/>
        //是否画点
        <attr name="chart_is_draw_point" format="boolean"/>
        //绘制的点是否空心
        <attr name="chart_is_slide_point" format="boolean"/>
        //是否显示折线图都一点的值
        <attr name="chart_is_show_index_text" format="boolean"/>
        //是否显示分割线
        <attr name="chart_is_show_grid" format="boolean"/>


有任何问题或者建议,欢迎直接骚扰,评论/私信。

github直达连接 https://github.com/leo2777/MoreLineAndBarChart

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
首先,我们需要准备数据。假设我们有以下数据: ```javascript var data = { // 柱状图数据 barData: [ { name: 'A', value: [120, 132, 101, 134, 90, 230, 210] }, { name: 'B', value: [220, 182, 191, 234, 290, 330, 310] }, { name: 'C', value: [150, 232, 201, 154, 190, 330, 410] }, { name: 'D', value: [320, 332, 301, 334, 390, 330, 320] } ], // 折线图数据 lineData: [ { name: 'A', value: [220, 182, 191, 234, 290, 330, 310] }, { name: 'B', value: [120, 132, 101, 134, 90, 230, 210] }, { name: 'C', value: [320, 332, 301, 334, 390, 330, 320] }, { name: 'D', value: [150, 232, 201, 154, 190, 330, 410] } ] }; ``` 接下来,我们可以使用 ECharts 来画出多条柱状图多条折线图。 ```javascript // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('myChart')); // 配置项 var option = { // 例 legend: { data: ['柱状图1', '柱状图2', '柱状图3', '柱状图4', '折线图1', '折线图2', '折线图3', '折线图4'] }, // x轴数据 xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, // y轴数据 yAxis: { type: 'value' }, // 柱状图数据 series: [ { name: '柱状图1', type: 'bar', data: data.barData[0].value }, { name: '柱状图2', type: 'bar', data: data.barData[1].value }, { name: '柱状图3', type: 'bar', data: data.barData[2].value }, { name: '柱状图4', type: 'bar', data: data.barData[3].value }, // 折线图数据 { name: '折线图1', type: 'line', data: data.lineData[0].value }, { name: '折线图2', type: 'line', data: data.lineData[1].value }, { name: '折线图3', type: 'line', data: data.lineData[2].value }, { name: '折线图4', type: 'line', data: data.lineData[3].value } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ``` 这段代码会生成一个例,其中包括了 4 条柱状图和 4 条折线图。x 轴的数据是固定的,为一周的天数,y 轴为数值轴。series 中分别配置了柱状图折线图的数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

营养过剩的肥仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值