linaCharts使用说明

来源:互联网 发布:淘宝剩余时间 编辑:程序博客网 时间:2024/06/01 10:15

 首先说说什么linaCharts吧,就是一个封装好的用three.js写的3D报表,除了有点丑以外其他还行(毕竟程序dog的审美观,后续会更新相关教程,让大家自己绘制自己的更漂亮的3d报表)。

代码和例子地址:https://github.com/linayukari/linaCharts

还是姑且上个图吧——



一、代码运行在服务器环境下,就是你不能直接双击html运行,而是要放在服务器环境中,用localhost/……访问。

二、按顺序导入three84.js,OrbitControls.js,LinaCharts.js

三、创建一个canvas 并且设置高和宽,高和宽的设置在标签上用width和height设置,切忌在css中设置,区别后续会详细讲解。

四、new一个linaCharts, test0 = new LinaCharts("mainCanvas0");

五、调用方法……ok , test0.pie(title,data,color,5,4);

目前linaCharts有上面4种(是少了点,后续会继续加),每种有若干个风格,参数如下:

                /*
                * 饼状图
                * title 每一个扇形的标签
                * data  每一个扇形的数据
                * color 每一个扇形的颜色

* unit 单位(高度不同时会使用)
                * style 风格 1-4
                */
                linaCharts.pie(title,data,color,unit,style);


/*
                * 金字塔图,
title[0]在最下面
                * title 每一次的标签
                * color 每一层的颜色
                * style 风格 1-3
                */
                linaCharts.pyramid(title,color,style);

                /*
                * 柱状图
                * x_label x坐标系的标签
                * y_label y坐标系的标签
                * x_color 相同x坐标的颜色相同,所有相同x坐标的圆柱的颜色
                * unit z轴的单位
                * data 数据
                * style 风格 1-2
                */
                linaCharts.bar(x_label,y_label,x_color,unit,data,
style);

                /*
                * 折线图
                * x_label x坐标系的标签
                * y_label y坐标系的标签
                * x_color 相同x坐标的颜色相同,所有相同x坐标的圆柱的颜色
                * unit z轴的单位
                * data 数据
                */
                linaCharts.line(x_label,y_label,x_color,unit ,data);



原创粉丝点击