反馈已提交

网络繁忙

图表对象接口

  • 文档创建者:ppxx
  • 历史版本:52
  • 最近更新:Catqiu 于 2023-04-10
  • 版本

    版本
    功能变更
    11.0.3新增一个获取当前展示图表 chartIndex 的接口 getCurrentChartIndex()
    11.0-


    Chart.WebUtils.getChart

    方法Chart.WebUtils.getChart(chartID)

    获取图表块对象

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

    示例1:获取单元格中插入的图表,chartID 为图表所在单元格,如:A1

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

    示例2:获取悬浮元素图表,chartID 为悬浮元素的名称,选中悬浮元素,单击鼠标右键「设置悬浮名称」可查看或修改悬浮元素名称

    FR.Chart.WebUtils.getChart("Float1");

    示例3:获取决策报表中的图表块,chartID 为组件名称

    FR.Chart.WebUtils.getChart("chart0");

    示例4:获取决策报表的报表块中单元格图表

    FR.Chart.WebUtils.getChart("A1","report0");
    移动端支持
    注意事项

    1)该接口不支持扩展图表。

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

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

    getChartWithIndex

    方法getChartWithIndex(chartIndex)获取图表对象
    参数chartIndex

    1)chartIndex 为数字型。

    2)默认图表块里面只有一个图表,这时的 chartIndex 为 0。

    3)当设置了图表切换,即一个图表块内有多个图表时,需要传入具体的 chartIndex 来获取具体的图表对象,这就意味着如果想获取第 n 个图表,那么传入的 chartIndex 应该为 n-1

    示例

    图表切换设置了 3 个图表,获取第 3 个图表对象

    FR.Chart.WebUtils.getChart("A1").getChartWithIndex(2);
    移动端支持

    getCurrentChartIndex()

    方法getCurrentChartIndex()

    获取当前展示图表的chartIndex

    多图表开启轮播时,不易使用 getChartWithIndex 的方法获取 chartIndex ,可能导致无法获取图表对象,此时需要使用 getCurrentChartIndex() 。

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

    series

    方法
    series[seriesIndex]

    获取系列对象

    需在获取图表对象之后使用

    参数seriesIndex默认的 chart 对象有一个 series 属性,该对象存储的是图表内系列相关的数据信息,是一个对象数组。如果想要获得图表中某一个具体的系列对象,则需要指定对应的索引 seriesIndex,seriesIndex 从 0 开始计数。
    示例

    示例1:对于饼图来说,一个系列就是一个饼图,例如需要表示第一个饼图的所有扇形的数据点。

    chart.series[0].points;

    示例2:假设已获取到图表对象 PieChart,现在想要获取里面的第 1 个系列对象,那么使用PieChart.series[0]即可得到,可以在浏览器中打印:

    var PieChart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(2);
    console.log(PieChart.series[0]);
    移动端支持部分移动端调用 JS

    series.points

    方法
    series.points[pointIndex]

    获取数据点对象

    需在获取图表对象之后使用

    参数pointIndex

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

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

    示例

    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);
    移动端不支持移动端

    数据点对象中的属性

    某些场景下,需要的可能只是满足某一特定条件下的一类数据点集合,这时可以通过 Array.filter 来指定过滤条件,从而筛选出想要的数据点集合。这里对数据点对象中的某些属性做一下介绍,编写过滤条件的时候需要使用:

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

    示例:筛选值大于 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; })



    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持