跳到主要内容

DynamicDvSankeyHelper

DynamicSankeyHelper​

目前的standard-chart为单次渲染模式，两次渲染间的状态不能做记录，所以框架为桑基图与时间轴的联动做了一个辅助类DynamicSankeyHelper

DynamicSankeyHelper初始化在standardChart之后

const chart = standardChart.init('chart', 'mobile-app-light');
const helper = new standardChart.helper.DynamicSankeyHelper(
    chart,
    option,
    {
        data: sourceData,
        link: sourceLink,
        info: sourceInfo,
        handleLinksStatus: true,
        handleFormatterStatus: true,
        handleTooltipStatus: true,
        handleNodeLengthPercentStatus: true,
    }
);
helper.play(sourceData.length - 1, { param1: 'num', param2: 'unit', param3: 'compare' })

初始化参数​

即构造方法 standardChart.helper.DynamicSankeyHelper: 默认集成辅助函数handleLinks、handleFormatter(注意：handlePcFormatter函数未集成)、handleTooltip、handleNodeLengthPercent

参数配置类型默认值描述备注
chartStandardChart无动态桑基图的实例对象
optionOption桑基图的配置项
data{data: Array<Array<customObject>>; link: Array<Array<customObject>>; info: Array<customObject>; handleLinksStatus: Boolean; handleFormatterStatus: Boolean; handleTooltipStatus: Boolean; handleNodeLengthPercentStatus: Boolean;}桑基图的数据用于动态所需的多周期数据，若需自定义辅助函数handleLinks、handleFormatter、handleTooltip、handleNodeLengthPercent，可通过handleLinksStatus、handleFormatterStatus、handleTooltipStatus、handleNodeLengthPercentStatus控制覆盖状态

播放参数​

即播放方法 play:

入参类型默认值描述备注
datenumber全周期中最后一期的索引值当前播放期在多周期数据中的索引
optsobject{ param1: 'num', param2: 'unit', param3: 'compare' }自定义节点label展示字段的属性例: 页面中增加同比开关,用以控制同比字段的显隐

多周期情况下单周期最大宽度比例尺处理​

standardChart之后调用

即构造方法 standardChart.helper.handleNodeLengthPercent:

示例调用:

const nodeLengthPercentArray = standardChart.helper.handleNodeLengthPercent(sourceData, {
    min: 0.33,
    max: 0.66,
    type: 'linear'
});
option.series[0].dvNodeLengthPercent = nodeLengthPercentArray[index];
入参类型默认值描述备注
dataArray<Array<customObject>>多周期节点数据
optsobject{ min: 0.33, max: 0.66, type: 'linear' }以容器宽度为基准，设定最大宽度占比和最小宽度占比。同时设置比例尺的类型

注：该辅助函数已在DynamicSankeyHelper中调用，在不改变默认参数情况下，无须调用。