如何获取图表对象

  • 文档创建者:ppxx
  • 编辑次数:24次
  • 最近更新:Leo.Tsai 于 2020-06-08
  • 1. 获取图表块对象

    1.1 用法

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

    注:chartID为字符串类型,表示当前图表所在图表块的唯一标识 ID。

    方法类型 说明
    FR.Chart.WebUtils.getChart("chartID")单元格chartID 为单元格名称,如:A1
    FR.Chart.WebUtils.getChart("chartID")悬浮元素chartID 为悬浮元素的名称,选中悬浮元素,右击可查看或设置悬浮元素名称
    FR.Chart.WebUtils.getChart("chartID")决策报表决策报表内添加的图表控件,chartID 为控件名称
    FR.Chart.WebUtils.getChart("chartId","reportName")决策报表决策报表内有多个报表块时,获取报表块中的图表

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

    1.2 示例

    获取 A1 单元格内图表块对象的写法如下:

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

    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. 获取系列对象

    3.1 用法

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

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

    方法
    chart.series[seriesIndex]

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

    3.2 示例

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

    可以在浏览器中打印:

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

    4. 获取数据点对象

    4.1 用法

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

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

    方法
    series.points[pointIndex]

    4.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);

    5. 数据点对象中的属性

    5.1 用法

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

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

    属性    含义
    point.name数据点的名称
    point.seriesName数据点对应的系列名称
    point.category数据点对应的分类名
    point.value数据点的值

    5.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; })

    6. 注意事项

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

    2)移动端决策报表的报表块内图表不支持调用上述所有的方法。

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!