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。

快速开始

light-chart 支持两种绘图方式:jsn 渲染方式和嵌套 h5 渲染。当页面内图表较多时建议使用嵌套 h5 渲染的方式以提升性能。

<text class="title">jsn渲染</text>
<lt-canvas ref="canvas" :width="750" :height="500"></lt-canvas>
<text class="title">嵌套h5渲染</text>
<web-canvas ref="webCanvas" :width="750" :height="500" src="canvas-wrap/index.html"></web-canvas>

注:使用h5方式渲染,需要传入src属性,指向工程内自定义的绘图模板,也可使用light提供的默认模板

import LightChart from 'light-chart';
export default {
components:{
ltCanvas:require("light-chart/canvas"),
webCanvas:require("light-chart/webCanvas")
},
data(){
return {}
},
mounted(){
// 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
const data = [
{ time: 'Jan.', tem: 1000 },
{ time: 'Feb.', tem: 2200 },
{ time: 'Mar.', tem: 2000 },
{ time: 'Apr.', tem: 2600 },
{ time: 'May.', tem: 2000 },
{ time: 'Jun.', tem: 2600 },
{ time: 'Jul.', tem: 2800 },
{ time: 'Aug.', tem: 2000 },
{ time: 'Sept.', tem: 2300 },
{ time: 'Oct.', tem: 1500 },
{ time: 'Nov.', tem: 3060 },
{ time: 'Dec.', tem: 3000 },
];
const scale = {
time: {
range: [ 0, 1 ]
},
tem: {
tickCount: 5,
min: 0
}
}


//jsn方式绘图

// 1. 创建 Chart 对象
let chart = new LightChart.Chart({
ltCanvas:this.$refs.canvas
});

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

// 3. 创建图形语法,绘制折线图,由 time 和 tem 两个属性决定图形位置,time 映射至 x 轴,tem 映射至 y 轴
chart.axis('time', {
label(text, index, total) {
var textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.tooltip({
showCrosshairs: true,
onShow(ev) {
var { items } = ev;
items[0].name = items[0].title;
}
});
chart.guide().tag({
position: [6, 2800],
content: '最高点',
offsetY: -5,
direct: 'tl'
});
chart.guide().tag({
position: [2, 2000],
content: '2000',
offsetY: -5,
direct: 'tc'
});
chart.area().position('time*tem');
chart.line().position('time*tem');

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


//h5方式绘图
//传入绘图指令(为了实现对低端移动设备更好的兼容,不要在指令中使用es6语法)
this.$refs.webCanvas.draw(`
chart.source(${JSON.stringify(data)});
chart.scale(${JSON.stringify(scale)});

chart.axis('time', {
label:function(text, index, total) {
var textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.tooltip({
showCrosshairs: true,
onShow:function(ev) {
var { items } = ev;
items[0].name = items[0].title;
}
});
chart.guide().tag({
position: [6, 2800],
content: '最高点',
offsetY: -5,
direct: 'tl'
});
chart.guide().tag({
position: [2, 2000],
content: '2000',
offsetY: -5,
direct: 'tc'
});
chart.area().position('time*tem');
chart.line().position('time*tem');
chart.render();
`);
}
}

更多示例:chart.js

手机扫码观看 demo