历史版本32 :图表对象接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 获取图表块对象编辑

1.1 用法

可通过 FR.Chart.WebUtils.getChart(chartID)获取图表块对象。

注:chartID 为字符串类型,表示当前图表所在图表块的唯一标识 ID,在 JS 中书写时需区分大小写,与实际组件名称保持完全一致。

类型方法示例说明
单元格FR.Chart.WebUtils.getChart("A1")chartID 为图表所在单元格,如:A1
悬浮元素FR.Chart.WebUtils.getChart("Float1")chartID 为悬浮元素的名称,选中悬浮元素,单击鼠标右键「设置悬浮名称」可查看或修改悬浮元素名称
决策报表图表块FR.Chart.WebUtils.getChart("chart0")

决策报表内添加的图表块组件,chartID 为组件名称

决策报表报表块中单元格图表FR.Chart.WebUtils.getChart("A1","report0")决策报表内有多个报表块时,获取报表块中的图表

注:移动端支持部分 JS 调用该方法。

1.2 注意事项

  • 该接口不支持扩展图表。

  • 上述所有获取对象的方法在移动端的实现方式跟 PC 端是有差异的,移动端只支持部分 JS 调用这些方法。

  • 决策报表报表块内图表,仅支持移动端 11.0.63 及之后的版本调用部分 JS 。

2. 获取图表对象编辑

2.1 用法

获取图表块对象 chartWidget 后,便可以使用chartWidget.getChartWithIndex(chartIndex)来获取图表对象,默认图表块里面只有一个图表,这时的 chartIndex 为 0。

注:chartIndex 为数字型。

而当设置了图表切换,即一个图表块内有多个图表时,需要传入具体的 chartIndex 来获取具体的图表对象。

chartIndex 从 0 开始计数,这就意味着如果想获取第 n 个图表,那么传入的 chartIndex 应该为 n-1。

方法
FR.Chart.WebUtils.getChart(chartID).getChartWithIndex(chartIndex)

注:移动端支持部分 JS 调用该方法。

2.2 示例

图表切换设置了 3 个图表,获取第 3 个图表对象的写法如下:

FR.Chart.WebUtils.getChart("A1").getChartWithIndex(2)

3. 获取当前展示图表的chartIndex编辑

3.1 用法

多图表开启轮播时,不易使用第 2 章的方法获取 chartIndex ,可能导致无法获取图表对象。

因此 11.0.3 版本设计器新增一个获取当前展示图表 chartIndex 的接口 getCurrentChartIndex()

方法
FR.Chart.WebUtils.getChart(chartId).getCurrentChartIndex()

3.2 示例

// 点击图表块开启全屏图表(.vanchart-cc只是一个示例,具体给哪个元素添加点击事件需根据实际情况决定)
$(".vanchart-cc").click(function() {
        var chart = FR.Chart.WebUtils.getChart("chart0");
        var currentChartIndex = chart.getCurrentChartIndex(); // 获取当前展示图表的chartIndex
        VanCharts.showLightBox(chart.getChartWithIndex(currentChartIndex));
});

4. 获取系列对象编辑

4.1 用法

默认的 chart 对象有一个 series 属性,该对象存储的是图表内系列相关的数据信息,是一个对象数组。

注:对于饼图来说,一个系列就是一个饼图,例如:chart.series[0].points 表示第一个饼图的所有扇形的数据点。

如果想要获得图表中某一个具体的系列对象,则需要指定对应的索引 seriesIndexseriesIndex 从 0 开始计数。

方法
chart.series[seriesIndex]


注:移动端支持部分 JS 调用该方法。

4.2 示例

假设已获取到图表对象 PieChart,现在想要获取里面的第 1 个系列对象,那么使用PieChart.series[0]即可得到。

可以在浏览器中打印:

var PieChart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(2);
console.log(PieChart.series[0]);

5. 获取数据点对象编辑

5.1 用法

每个 series 对象里面又有一个 points 的属性,也是一个对象数组,这个 points 数组里面存放的就是我们想要的 point 数据点对象。

如果需要获取某个具体的数据点对象,则需要指明该数据点的索引 pointIndexpointIndex 从 0 开始计数。

方法
series.points[pointIndex]

5.2 示例

chart.series[0].points,可获取第一个系列下的所有数据点集合。那么如果想拿到图表下所有数据点的集合该怎么做呢?只需要一个简单的遍历操作便可以完成:

var PieChart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(2);
var points = [];
PieChart.series.forEach(function (ser){
    points = points.concat(ser.points);
})
console.log(points);

6. 数据点对象中的属性编辑

6.1 用法

某些场景下,需要的可能只是满足某一特定条件下的一类数据点集合,这时可以通过 Array.filter 来指定过滤条件,从而筛选出想要的数据点集合。

这里对数据点对象中的某些属性做一下介绍,编写过滤条件的时候需要使用:

属性    含义
point.name数据点的名称
point.seriesName数据点对应的系列名称
point.category数据点对应的分类名
point.value数据点的值
point.isVisible判断数据点是否可见
chart.showTooltip(point)触发数据点提示

6.2 示例

筛选值大于 0.1 的数据点的集合,写法如下:

var PieChart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(2);
var points = [];
PieChart.series.forEach(function (ser){
    points = points.concat(ser.points);
})
points = points.filter(function (p){ return p.value > 0.1; })