ThingJS图表整合

ThingJS有自己的可视化图表编辑工具啦！
ChartBuilder可以让更多的人通过可视化发现数据的价值,帮助非专业工程师通过图形化界面,轻松搭建专业水准的可视化场景。

启动ChartBuilder

ThingJS的商业开发者进入调试环境会看到下图中图标“导入图表”按钮。

新建或者打开项目，点击导入图标可进入ChartBuilder界面。在这里就可以添加想要的图表啦！

插入图表

在ChartBuilder菜单栏中有各种不同类型的图表，可根据项目需求任意添加。操作完成后可以通过ctrl+s保存图表，保存完成回到调试环境，刷新页面或者点击项目前边小图标刷新，就可以看到项目下新增了后缀为“.cht”的文件。“.cht”的右键菜单就包含了该场景的“图表编辑”和“图表预览”。

对接数据

选中图表，选择下图框选按钮，接入多种数据源。其中包含了静态数据、接口请求、数据库查询等方式，具体的可以参考ChartBuilder的文档的数据接入部分。

实现交互

双击图表，右侧会显示代码编辑区域。可以在Options配置中修改图表的样式，在JavaScript选项中处理一些图表的样式和逻辑问题。下面我们看一下图表和ThingJS的交互问题。

图表控制场景

首先根据ChartBuilder文档，获取图表点击事件。监听到事件后，通过postMessage方式向场景中传入数据。

var _this = this;
setTimeout(function(){_this.getChartsInstance().on("click",function(params){var iframe = getByClass("iframeStyle")[0];iframe.contentWindow.postMessage(params.name,'https://www.thingjs.com');})
},5000)
function getByClass(sClass){var aResult=[];var aEle=document.getElementsByTagName('*');for(var i=0;i<aEle.length;i++){if(aEle[i].className==sClass){aResult.push(aEle[i]);}}return aResult;
}

ThingJS场景监听接收数据，根据接收到的参数"e.data"来操作场景中的数据。

window.addEventListener('message',function(e){var name = e.data;
}

场景影响图表

场景中变化影响图表，图表控制场景方式类似。首先在场景发生变化是发出消息。下边这段代码是在ThingJS场景点击车辆，通过postMessage方式向图表传递一些参数。

下边是文本图表监听ThingJS场景变化的方式。

var data = this.getComponentData();
data.value = "未选择车辆";window.addEventListener('message',function(e){if(e.data && e.data.name){data.value = "选择车辆" + e.data.number + " " +e.data.name;}else{data.value = "未选择车辆";}
})

ChartBuilder教程：http://doc.dapingda.uinnova.com/doc/userguid/start.html
ChartBuilder API文档：http://doc.dapingda.uinnova.com/doc/userguid/data.html
ChartBuilder数据接入：http://doc.dapingda.uinnova.com/doc/userguid/data.html