|
brokenLine 模块实现的温度变化折线图例子分享
[复制链接]
本帖最后由 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>
复制代码
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|