帆软堆积柱形图标签显示汇总值,标签写js,树形图系列展示汇总值占比,系列求和

本文介绍了如何使用JavaScript实现柱状图、树形图、组合图中汇总值的显示、系列标签的百分比计算,以及针对不同场景的标签格式调整。通过实例展示了如何在图表中清晰呈现数据总和与细节,适用于数据分析和可视化应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、堆积柱形图标签显示汇总值在这里插入图片描述

比如上图。
在这里插入图片描述
js:

function() { var point = this; var series = this.series; var points = this.points;/*获取当前分类下所有点*/ var validPoints = points.filter(function(p) { return p.series.visible && p.visible && !p.isNull;/*获取当前分类下的有效点*/ }); var len = points.length; var vlen = validPoints.length; if (point == validPoints[vlen - 1]) { var value = 0; for (var i = -1; ++i < len;) { if (points[i].series.visible) { value += points[i].getTargetValue();/*获取点的值*/ } } return "$"+Math.round(value)+"万";/*返回相加后的值*/ } else { return "";/*返回各个系列的值*/ } }

2、树形图系列标签占总体

结果如图:

在这里插入图片描述
在这里插入图片描述

js :

function() {
 var points = this.series.points; //获取当前系列所有的数据点
 var total = 0;
 for (var i = 0,
 len = points.length; i < len; i++) {
  total += points[i].value; //求分类下的系列和
 }
 return this.name + '<br/>' + FR.contentFormat(this.value, '#0') + '万' + FR.contentFormat(this.value / total, '#0.0%');

}

3、组和图,堆积加折线图,展示每个柱子值和百分比,展示百分比大于5%的

function(){
 var zb = this.percentage;
 if(zb >= 0.05){return FR.contentFormat(this.value, '#,##0') +' '+FR.contentFormat(this.percentage, '#0%');}
 else {return ""}
 }

4、效果图

在这里插入图片描述
汇总值本身就有的,只是为了调整Y轴,
添加如下代码即可:

 function(){
 function format(num){
   let str = num.toString();
   let leg = str.length;
   let arr = str.split('');
   if(leg <= 3) return str;
   for (let i = leg - 3; i > 0; i-=3) {
     arr.splice(i, 0, ',')
   }
   return arr.join('');
};
  var   countqty = new $("td[id^=A2-]").text();
 if(this.category=="汇总"){return format(Math.round(this.value*countqty));}
 else {return format(Math.round(this.value))};
}

在这里插入图片描述

5.组合图系列求和

效果图
在这里插入图片描述
代码:

function sumLabel(){
  const point = this;
  const points = point.points;
  const validPoints = points.filter( (point) => point.isVisible() );
  if(point == validPoints[validPoints.length - 3]) //把汇总值显示在第2个系列
  {
    let value = 0;
    for(let i = 0; i < validPoints.length-1; i++) //求和的值包含的系列为从下往上数前2个系列
    {
      value += validPoints[i].value;
    }
    return FR.contentFormat(value, '#,##0');
  } else {
    return "";
  }
}

6.系列和汇总都要

如果即想要柱形图汇总,又想要单个柱子值,建议还是在新建一个汇总的折线,再把折线给隐藏了
如下图:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值