Highcharts如何将钟形曲线的均值与标准差传递至外部函数
Highcharts 钟形曲线均值、标准差向外传递实现方案
完全可以实现,不需要修改Highcharts底层源码,钟形曲线模块自动计算的均值、标准差参数本身就挂载在系列实例上,直接读取后传给自定义函数即可,常用两种落地方式:
方式1:在系列渲染完成事件中读取参数
引入bellcurve模块后,正态分布系列在渲染阶段会基于绑定的直方图数据自动计算出均值(mean)、标准差(standardDeviation),两个参数会直接作为属性挂载在钟形曲线的系列实例上,在系列渲染完成的回调里读取即可,不会影响原有图表渲染逻辑。
参考代码:// 外部自定义统计函数 function customStatsOperation(mean, stdDev) { // 此处编写自定义统计逻辑,例如显著性校验、分布区间计算、参数同步等 console.log('均值:', mean, '标准差:', stdDev) } Highcharts.chart('chartContainer', { series: [ { name: '原始数据', type: 'scatter', data: [/* 你的原始数据集 */], id: 'rawData', visible: false }, { name: '频次直方图', type: 'histogram', baseSeries: 'rawData', id: 'histogram' }, { name: '正态分布钟形曲线', type: 'bellcurve', baseSeries: 'histogram', events: { afterAnimate: function() { // 直接读取实例上挂载的计算结果 const calculatedMean = this.mean const calculatedStdDev = this.standardDeviation // 传入自定义函数 customStatsOperation(calculatedMean, calculatedStdDev) } } } ] })注意不要在图表初始化的同步代码里直接读取这两个属性,钟形曲线的参数计算是在系列渲染阶段执行的,初始化阶段读取会拿到
undefined,放在afterAnimate或者图表全局的render回调中取值最稳定。方式2:拦截模块计算方法全局获取参数
如果页面存在多个钟形曲线实例,不想逐个给系列加事件,可以重写bellcurve系列的点位计算方法,在参数计算完成的第一时间拦截取值,不破坏原有渲染逻辑:// 缓存原生计算方法 const nativeBellCurveCalc = Highcharts.seriesTypes.bellcurve.prototype.getPoints // 重写方法加入参数传递逻辑 Highcharts.seriesTypes.bellcurve.prototype.getPoints = function(...args) { // 执行原生计算逻辑 const curvePoints = nativeBellCurveCalc.apply(this, args) // 取出计算完成的参数传给自定义函数 customStatsOperation(this.mean, this.standardDeviation) // 返回原生计算的点位,保证曲线正常渲染 return curvePoints }这种方式全局生效,所有钟形曲线实例完成参数计算后都会自动触发自定义函数,适合多图表的场景。
补充说明:如果你手动给bellcurve系列配置了
mean、standardDeviation参数覆盖自动计算逻辑,上述两种方式拿到的就是你手动传入的配置值,和曲线实际渲染使用的参数完全一致,不会出现参数不匹配的问题。
内容的提问来源于stack exchange,提问作者smimar1074
相关产品推荐
相关产品推荐

