Question

我为highstocks.js创建了自定义格式化程序功能：

            var tooltip = [];
            for (key in this.points) {//if point type is portfolio
                if ( this.points[key].point.type == 'portfolio' ) { 
                    tooltip[key] = '<span style="color:' + his.points[key].series.color +'">' + this.points[key].series.name + '</span>' + '<br/><b>'+ _('', 'Net assets: ') + _s(this.points[key].point.sum, 2) + '</b>' + '<br/><b>'+ _('', 'Чистые активы: ') + _s(this.points[key].point.netassets, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0)  +'%</span>)<br/>';
                } else {
                    tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>: <b>'+ _s(this.points[key].point.y, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0)  +'%</span>)<br/>';
                }
            }
             var tl = '';
             for (key in tooltip) {
                tl += tooltip[key]
             }
            var date = Highcharts.dateFormat('%d %b %Y', this.points[0].point.x);

            tl = date + '<br/>' +tl;
            return tl;

这个特性是这个函数不仅使用了一个点的Y，而且还使用了一些我添加到点的附加属性：比如类型。

对于“投资组合”类型的点，tooltop shoold会以不同的方式呈现，并且必须拥有更多数据，然后用于“常规”点类型。

我遇到的问题是当conatiner div的宽度很小时，我的模板不起作用，虽然当div的宽度很大时它可以正常工作。

当将图表呈现为相对较小的区域时，Highstocks.js会执行默认聚合：http://api.highcharts.com/highstock#plotOptions.area.dataGrouping

当对点进行分组时，它们会丢失所有其他属性，只留下Y属性，因此复杂的tooltop无法工作。

要解决此问题，我必须在图表选项中禁用数据灌浆：

        plotOptions: {
        series: {
            dataGrouping: {
                enabled: false
            }
        }
    },

是否可以在小图表上显示复杂的工具提示而无需禁用dataGrouping？

Answer 1

问题是：'如何分组point.type'？我想你想按类型分组，然后在那个地方显示n点？或者按原样分组，但在选项中计算类型的数量？如果用户定义myCustomFancyProperty - 那么呢？从点聚合所有自己的属性？它变得越来越难了......我可以建议的是创建一个有一些解释/解决方案的想法here。

您始终可以从分组点x值（this.x）获取，然后循环遍历所有点（可通过this.points[0].series.options.data访问），找到最接近该时间戳的点并显示所需的值。 / p>

Answer 2

Pawel Fus 建议，我遍历所有点以找到最接近的值并为每个分组点添加附加属性。

这是整个formmater函数。

formatter: function() {
            var tooltip = [];
             //Тултип
            for (var key in this.points) {//Если точка - пользователь

                //прочитаем тип
                var closestX = 0;
                for (var j in this.points[key].series.options.data ) {
                    if ( Math.abs(this.points[key].series.options.data[j].x - this.points[key].point.x) < diff ) {
                        closestX =  j;
                    }
                    var diff = Math.abs(this.points[key].series.options.data[j].x - this.points[key].point.x);
                }

                this.points[key].point.type = this.points[key].series.options.data[closestX].type;
                this.points[key].point.sum = this.points[key].series.options.data[closestX].sum;
                this.points[key].point.netassets = this.points[key].series.options.data[closestX].netassets;

                if ( this.points[key].point.type == 'portfolio' ) { //если точка не пользователь
                    tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>' +
                        '<br/><b>'+ _('', 'Сумма активов: ') + _s(this.points[key].point.sum, 2) + '</b>' +
                        '<br/><b>'+ _('', 'Чистые активы: ') + _s(this.points[key].point.netassets, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0)  +'%</span>)<br/>';
                } else {
                    tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>: <b>'+ _s(this.points[key].point.y, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0)  +'%</span>)<br/>';
                }
            }
             var tl = '';
             for (key in tooltip) {
                tl += tooltip[key]
             }
            //Дата
            var date = Highcharts.dateFormat('%d %b %Y', this.points[0].point.x);

            tl = date + '<br/>' +tl;
             return tl;
        },

图表小时，Highstocks工具提示不起作用？

2 个答案: