在MSTR中使用ECharts作为VI模板（2）-- 数据筛选器

在上一篇中（点击这里查看），我们创建了一个最简单的ECharts VI，但是当添加筛选器的时候发现对这个VI完全不起作用。

因而，本篇就要介绍如何给VI做数据筛选以及如何使用VI作为数据筛选器。

本篇内容包括：

数据接口
将VI用作筛选器
代码整理及优化
最终效果

1. 数据接口

1.1 数据接口API

MSTR的数据接口包括以下几个:

mstrmojo.models.templates.DataInterface
mstrmojo.models.templates.Titles
mstrmojo.models.templates.Title
mstrmojo.models.templates.Headers
mstrmojo.models.templates.Header
mstrmojo.models.templates.MetricValue

想要了解详情，可以查看这里。用法都很简单的，看下说明就懂了。这里以DataInterface 为例进行说明。
其实在第一篇中我们已经用到了这个接口，用来获取用户传递过来的数据。其中使用到了getRawData这个函数。语法如下：

getRawData(format, params)

format 上一篇已介绍，就是获取数据的格式（树形或表）
params 根据数据格式不同有所不同，其中有一个 hasSelection 是大家共有的，表示是否包含筛选，这就是我们今天要用到的参数。这个值默认是false，我们将其设置为true就可以使筛选器起作用。

1.2 获取筛选后的数据

上一篇中只要更改一个地方，就可以是筛选器起作用了。这里顺便让数据的标题显示出来

var rawData = this.dataInterface.getRawData(mstrmojo.models.template.DataInterface. ENUM_RAW_DATA_FORMAT.ROWS_ADV, {hasSelection: true,hasTitleName:true});

1.3 调试

这里要简单讲一下调试，来看看获取的数据结构到底是怎样的。这里我用的火狐浏览器。其他浏览器也差不多。
打开上一篇创建的Dashboard，然后添加筛选器，再按下F12打开调试。然后在调试器下找到我们创建的TestECharts.js，可以发现这里的代码其实就是我们在Plot Code里面写的。设置一个断点，再次刷新数据。

我们看下rawData：
headers 表示数据项的标题，也就是每个数据所对应的维度的值。其中name就是维度的值，tname就是维度的名称。
values 表示数据也就是度量值。name就是度量值的名称，rv是实际的值，v就是显示的值。
还有个mericSelector是将VI用作筛选器用的，稍后再提。
一般也就用到这几个。

1.4 筛选效果

测试一下筛选器吧，已经可以看到效果。3月份的数据被我勾选掉了。

2. 将VI用作筛选器

将VI用作筛选器需要用到EChats的Click事件以及MSTR中applyselection回调。下面这段代码几乎是照抄官方文档，而且几乎所有图表都适用，只要复制粘贴即可。

this.addUseAsFilterMenuItem();
me=this;
myChart.on('click', function (d) {if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.selectionDataJSONString) { // mobile端d.selection.messageType = "selection";window.webkit.messageHandlers.selectionDataJSONString.postMessage(rawData[d.dataIndex].metricSelector);} else {me.applySelection(rawData[d.dataIndex].metricSelector); // web端}
});

其中的 metricSelector 就是上一节提到的，我们根本不用关心里面是啥，就这么用就行了。
不过要注意的是，当原始数据获取采用树形结构时，就不是 metricSelector 了，而要把它换成 attributeSelector，就是这么简单。

3. 代码整理及优化

最终代码如下：

//Div名称和高宽配置
var divName="main" + parseInt(Math.random()*100000000);
var margin = {top : 10,right : 10,bottom : 30,left : 30}, width = parseInt(this.width, 10) - margin.left- margin.right, height = parseInt(this.height, 10) - margin.top - margin.bottom;//删除已有的图形
if(this.domNode.childNodes.length>=1){for(i=0;i < this.domNode.childNodes.length;i++){this.domNode.removeChild(this.domNode.childNodes[i]);}
}//使用D3创建一段Div
d3.select(this.domNode).append("div").attr("ID",divName).style("height",height + "px").style("width",width + "px");//初始化Echarts对象
var myChart = echarts.init(document.getElementById(divName));//获取数据
var rawData = this.dataInterface.getRawData(mstrmojo.models.template.DataInterface. ENUM_RAW_DATA_FORMAT.ROWS_ADV, {hasSelection: true,hasTitleName:true});
var xTitle=[];
var xValue=[];
for(i=0;i < rawData.length;i++){xTitle[i]=rawData[i].headers[0]["name"];xValue[i]=rawData[i].values[0]["rv"];
}//数据筛选
this.addUseAsFilterMenuItem();
me=this;
myChart.on('click', function (d) {if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.selectionDataJSONString) { // mobile端d.selection.messageType = "selection";window.webkit.messageHandlers.selectionDataJSONString.postMessage(rawData[d.dataIndex].metricSelector);} else {me.applySelection(rawData[d.dataIndex].metricSelector); // web端}
});// 指定图表的配置项和数据
var option = {title: {text: 'ECharts示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: xTitle},yAxis: {},series: [{name: '销量',type: 'bar',data: xValue}]
};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

4. 最终效果

来测试下，添加一个VI，然后将我们创建的图形作为筛选器。试着点击一下我们的柱形图，筛选效果就出来了。

5. 参考

DataInterface API