0

我为 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，还使用了一些我在该点上添加的附加属性：例如type。

对于“投资组合”类型的点，工具顶部应该以不同的方式呈现，并且必须具有比“常规”点类型更多的数据。

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

Highstocks.js 在将图表渲染到相对较小的区域时会进行默认聚合：http: //api.highcharts.com/highstock#plotOptions.area.dataGrouping

当点被分组时，它们会失去所有额外的属性，只留下 Y 属性，所以复杂的 tooltop 将不起作用。

要修复它，我必须在图表选项中禁用数据分组：

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

有没有一种方法可以在不禁用数据分组的情况下在小图表上显示复杂的工具提示？

4

2 回答 2

1

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

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

于 2013-11-05T13:27:02.423 回答
0

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

这是整个格式化程序功能。

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;
        },
于 2013-11-07T14:46:45.823 回答