在数组中使用数组时替代已弃用的 Highcharts.each

我正在使用一个简单的 Highcharts 柱形图来显示一组数据。悬停在 Highcharts 外部的数组用于为每列生成工具提示。一年中的每个月都有一列。在工具提示 pointFormatter 中使用“Highcharts.each”功能时,一切都很好。每个月列显示该特定月份的正确股票代码:例如,将鼠标悬停在“一月”图表列上时,工具提示在顶行显示“一月”,在下一行显示“CMA、OMC、DIS、JPM”在工具提示中。注意:此时,一年中的最后 6 个月仍然是未来,这就是为什么 'tooltip_ticks' 数组中的最后 6 个元素具有空值的原因。


var tooltip_ticks = 

[["CMA","OMC","DIS","JPM"],

["TXN","ABBV","SPG"],

["ENB","TJX","TGT","MMM","MSFT","VBR","ED","HD","AVGO","VTV"],

["CMA","OMC","FXAIX","JPM"],

["CVS","ABBV","TXN"],

["ENB","WFC","PFE","TGT","MSFT","MMM","ED","HD"],

"","","","","",""]

.

.

.

        tooltip: {

            useHTML: true,

            pointFormatter: function() {

                var string = '';

                Highcharts.each(tooltip_ticks[this.series.data.indexOf(this)], function(tick) { 

                    string += tick + ', '

                });

                return string;

            }

        }

Highcharts.each 函数已被弃用。我花了将近 2 个小时和多次代码迭代试图弄清楚如何使用 js Array.forEach 函数复制上面的代码。一个例子:


            pointFormatter: function() {

                var string = '';

                tooltip_ticks.forEach(function(tick) {  

                    string += tick + ', '

                });

                return string;

            }

这会为每个月创建一个工具提示,但每个月的工具提示都包含“tooltip_ticks”数组中的所有元素。我不知道如何获得正确的每月子数组索引,以便在每个工具提示中只显示单个月份的代码。换句话说,相当于这个


tooltip_ticks[this.series.data.indexOf(this)]

我是否需要在 forEach 函数中执行某种“For”循环,因为子数组需要循环并且子数组元素一个一个地提取?


我会使用 js 和/或 Highcharts 图表库将我的经验水平归类为“初学者”,因此不完全是新手,但仍处于早期学习模式。任何帮助/建议将不胜感激。


忽然笑
浏览 287回答 1
1回答

HUWWW

好吧,在发布了这个问题并在第二天重新阅读之后,我能够从一个新的角度看待它,并针对与我的情况相关的已弃用的 Highcharts.each 函数提出了以下解决方案。关键是使用 this.series.data.indexOf(this) 参数和 array.forEach 函数。顺便说一句,我还添加了一个简短的条件来处理因循环遍历每个数据点的最后一个子数组元素而产生的尾随逗号&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tooltip: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; useHTML: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headerFormat: '<b>{point.x}</b><br/>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pointFormatter: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var string = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var i = this.series.data.indexOf(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var ticks = tooltip_ticks[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ticks.forEach(function(tick, index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (index != ticks.length - 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; string += tick + ', ';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; string += tick;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return string;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript