JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JavaScript – 在Highcharts中添加系列总数到图例大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
使用Highcharts.js – 我想添加系列总数到图例(它当前说’12345′).我知道我需要写一个labelFormatter函数,但我不知道足够的 JavaScript来弄清楚如何总结每个系列的总和.代码在下面(也是现场版本: http://jsbin.com/ukabob/8).
$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',type: 'line',BACkgroundColor: '#E9E7DC',borderRadius:0,margin: [0,150,30,0]
        },colors: ['#A74B59','#46C4B7','#EDBA70'],credits: {
          enabled: false
        },title: {
            text: null
        },xAxis: {
            categories: ['2013','2014','2015','2016','2017','2018','2019','2020','2021','2022'],gridLineWidth:1,gridLineColor: '#FFFFFF',labels: {
              style: {
                color: '#000000'
              },formatter: function() {
                return '<div style="font-size:22px; font-family: \'Advent Pro\',sans-serif;">'+
                    this.value +'</div>';
              },y:25
            },lineColor: '#FFFFFF',tickColor: '#FFFFFF',tickLength: 30
        },yAxis: {
            gridLineWidth:0,title: {
                text: null
            },labels: {
              enabled: false
            }
        },plotOptions: {
          series: {
            marker: {
                radius: 6,lineWidth: 2,lineColor: null,// inherit from series
                symbol: 'circle',states: {
                    hover: {
                        fillColor: '#E9E7DC',radius:6
                    }
                }
            },states: {
              hover: {
                lineWidth:4
              }
            }
          }
        },tooltip: {
            borderWidth:0,borderRadius: 0
            },legend: {
          borderRadius:0,BACkgroundColor: '#FFFFFF',itemMarginBottom: 7,layout: 'vertical',align: 'right',verticalAlign: 'top',y: 30,x: 2,borderWidth: 0,width:130,symboLPADding: 10,useHTML:true,shadow: {
              color: '#000',width: 3,opacity: 0.15,offsetY: 2,offsetX: 1
            },labelFormatter: function() {
              return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\',sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(@R_102_10586@l: 12345)</span>';
        }

        },series: [{
            name: 'Honeywell',data: [700,725,750,850,950,1000,1025,1050,1050]
        },{
            name: 'Bombardier',data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
        },{
            name: 'Embraer',data: [747,789,839,861,890,908,984,1030,1097,1156]
        }]
    });
});

});

解决方法

一个更通用的&动态答案:
legend: {
   labelFormatter: function() {
      var @R_102_10586@l = 0;
      for(var i=this.yData.length; i--;) { @R_102_10586@l += this.yData[i]; };
      return this.name + '- @R_102_10586@l: ' + @R_102_10586@l;
   }
}

大佬总结

以上是大佬教程为你收集整理的JavaScript – 在Highcharts中添加系列总数到图例全部内容,希望文章能够帮你解决JavaScript – 在Highcharts中添加系列总数到图例所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。