brokenLine 模块实现的温度变化折线图例子分享

uoaccw

本帖最后由 uoaccw 于 2019-1-5 13:38 编辑

brokenLine模块封装了一个折线图视图，开发者可自定义其样式，可刷新数据，左右拖动查看不同的数据
文档地址：https://docs.apicloud.com/Client-API/UI-Layout/brokenLine#1

附件有widget包

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
body {
padding: 30px
}
</style>
</head>
<body>
<button type="button" onclick="fnBrokenLineOpen()" name="button">fnBrokenLineOpen</button>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
};
function fnBrokenLineOpen() {
var brokenLine = api.require('brokenLine');
brokenLine.open({
x: 0,
y: 25,
h: 300,
bg: "#fff",
shadowColor: "#fff",
yAxis: {
max: 30,
min: 0,
step: 2
},
mark: {
dot: {
markX: "时",
markY: "度",
sizeY: 12,
sizeX: 12
}
},
brokenLine: {
color: "#0000ff",
width: 2
},
node: {
color: "#0000ff",
size: 4,
showBubble: false
},
datas: [{
mark: 6,
value: 9
}, {
mark: 7,
value: 11
}, {
mark: 8,
value: 13
}, {
mark: 9,
value: 15
}, {
mark: 10,
value: 17
}, {
mark: 11,
value: 19
}, {
mark: 12,
value: 21
}, {
mark: 13,
value: 20
}, {
mark: 14,
value: 22
}, {
mark: 15,
value: 19
}, {
mark: 16,
value: 19
}, {
mark: 17,
value: 18
}, {
mark: 18,
value: 17
}, {
mark: 19,
value: 16
}, {
mark: 20,
value: 15
}, {
mark: 21,
value: 14
}, {
mark: 22,
value: 13
}, {
mark: 23,
value: 12
}, {
mark: 0,
value: 11
}, {
mark: 1,
value: 9
}, {
mark: 2,
value: 8
}, {
mark: 3,
value: 7
}, {
mark: 4,
value: 7
}, {
mark: 5,
value: 8
}]
}, function(ret, err) {
if (ret) {
console.log(JSON.stringify(ret));
}
});
}
</script>
</html>

复制代码

gigie

感谢分享。

用一场烟火，换一世迷离

模块点击获取不到下标是怎么回事呢

用一场烟火，换一世迷离

jenny-2015

点击节点，一直为0