light-chart API文档

light chart是一个基于F2框架封装,专注于移动,开箱即用的可视化解决方案,支持 H5 同时兼容jsn环境。完备的图形语法理论,满足你的各种可视化需求。

安装

1.首先需要安装lighting开发工具,安装方法参考 开发工具安装

2.下载light chart模块,在源代码目录的lib目录执行:npm install -d --save light-chart

3.引入组件,在需要使用light chart图表库的vue文件中使用如下代码:import LightChart from 'light-chart',并注册组件 components:{ ltCanvas:require ("light-chart/canvas")}

4.使用组件,<lt-canvas ref="canvas" :width="750" :height="500"></lt-canvas>

5.每个图表的使用详情参见后面章节light chart。

快速开始

<lt-canvas ref="canvas" :width="750" :height="500"></lt-canvas>
import LightChart from 'light-chart';
export default {
components:{
ltCanvas:require("light-chart/canvas")
},
data(){
return {}
},
mounted(){
// 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
const data = [
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 },
];
// Step 1: 创建 Chart 对象
let chart = new LightChart.Chart({
ltCanvas:this.$refs.canvas
});

// Step 2: 载入数据源
chart.source(data);

// Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
chart.interval().position('year*sales');

// Step 4: 渲染图表
chart.render();
}
}

更多示例:demos

手机扫码观看 demos