Question

我正在尝试创建一个访客返回渠道，以显示3个类别的消费者的访客数量和之前访问的百分比：1次访问，2次访问和3次以上访问。

$(function () {
    var dataEx = [
                ['1 Visit', 352000],
                ['2 Visits',       88000],
                ['3+ Visits',       42000]
            ],
        len = dataEx.length,
        sum = 0,
        minHeight = 0.05,
        data = [];
    
    for(var i = 0; i < len; i++){
        sum += dataEx[i][1];
    }
    
    for(var i = 0; i < len; i++){
        var t = dataEx[i],
            r = t[1] / sum;
        data[i] = {
            name: t[0],
            y: ( r > minHeight ? t[1]  : sum * minHeight ),
            label: t[1]
        }
    }
    $('#container').highcharts({
        chart: {
            type: 'funnel',
            marginRight: 100,
       
        
          events: {
        load: function() {
          var chart = this;
          Highcharts.each(chart.series[0].data, function(p, i) {
            p.dataLabel.attr({
              x: (chart.plotWidth - chart.plotLeft) / 2,
              'text-anchor': 'middle'
            })
          })
        },
        redraw: function() {
          var chart = this;
          Highcharts.each(chart.series[0].data, function(p, i) {
            p.dataLabel.attr({
              x: (chart.plotWidth - chart.plotLeft) / 2,
              'text-anchor': 'middle'
            })
          })
        }
      },
        
       },  
      
        title: {
            text: 'Guest Return Funnel',
            x: -50
        },
        tooltip: {
            //enabled: false
            formatter: function() {
                return '<b>'+ this.key  +
                    '</b> = <b>'+ Highcharts.numberFormat(this.point.label, 0) +'</b>';
            }
        },
        plotOptions: {
            series: {
            
            
            allowPointSelect: true,
            borderWidth: 12,
            
            animation: {
                duration: 400
            },
            
            
                dataLabels: {
                    enabled: true,
                    
                    connectorWidth:0,
                    distance: 0,
                    
                    formatter: function(){
                      var point = this.point;  
                        console.log(point);
                      return '<b>' + point.name + '</b> (' + Highcharts.numberFormat(point.label, 0) + ')'; 
                    },                
                    minSize: '10%',
                    color: 'black',
                    softConnector: true
                },
                
                neckWidth: '30%',
            		neckHeight: '0%',
            		width: '50%',
            		height: '110%'
                
                
                //old options are as follows:
                
                //neckWidth: '50%',
                //neckHeight: '50%',
                //-- Other available options
                //height: '200'
                // width: pixels or percent
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Unique users',
            data: data
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/funnel.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

现在，我有一个漏斗，其中每个类别的访客人数都被标记了出来，并且居中。还使用一种数据预处理算法来可视化可能的小值，并将其缩放以使其仍存在于结果中。

我想将先前访问值的百分比添加到渠道中，但是我不知道如何以给定的数据格式针对我使用的系列进行此操作，并且我不认为数据预处理算法可以在以下情况下起作用我做到了。

我还想更改工具提示，以便当我将鼠标悬停在其上时会显示类似的信息（不要介意红色）。

我非常感谢您的帮助。

Answer 1

如果我对您的理解很好，那么当然可以使用当前的数据处理算法，因为事实是您已经计算了百分比并将其分配给r变量，就在此处代码：

for (var i = 0; i < len; i++) {
  var t = dataEx[i],
  r = t[1] / sum;
  data[i] = {
    name: t[0],
    y: (r > minHeight ? t[1] : sum * minHeight)
    label: t[1]
  }
}

因此，您需要舍入该值并将其分配给point对象中的新参数，可以通过以下方式完成：

for (var i = 0; i < len; i++) {
  var t = dataEx[i],
  r = t[1] / sum;
  data[i] = {
    name: t[0],
    y: (r > minHeight ? t[1] : sum * minHeight),
    percent: Math.round(r * 100),
    label: t[1]
  }
}

然后，您将可以在工具提示和数据标签formatter函数中访问该值：

工具提示格式化程序：

    tooltip: {
      formatter: function() {
        return '<b>' + this.key +
          '</b><br/>Percent of Prior Visit: '+ this.point.percent + '%<br/>Guests: ' + Highcharts.numberFormat(this.point.label, 0);
      }
    },

数据标签格式化程序：

      formatter: function() {
        var point = this.point;
        console.log(point);
        return '<b>' + point.name + '</b> (' + Highcharts.numberFormat(point.label, 0) + ')<br/>' + point.percent + '%';
      }

您要做的最后一件事是将dataLabels垂直对齐，因为现在它们有两条线，因此将它们全部居中应该很好。这是达到这种效果的方法：

chart: {
  type: 'funnel',
  marginRight: 100,
  events: {
    load: function() {
      var chart = this;
      Highcharts.each(chart.series[0].data, function(p, i) {
        var bBox = p.dataLabel.getBBox()
        p.dataLabel.attr({
          x: (chart.plotWidth - chart.plotLeft) / 2,
          'text-anchor': 'middle',
          y: p.labelPos.y - (bBox.height / 2)
        })
      })
    },
    redraw: function() {
      var chart = this;
      Highcharts.each(chart.series[0].data, function(p, i) {
        p.dataLabel.attr({
          x: (chart.plotWidth - chart.plotLeft) / 2,
          'text-anchor': 'middle',
          y: p.labelPos.y - (bBox.height / 2)
        })
      })
    }
  },
}

实时示例：http://jsfiddle.net/yzx46p38/

亲切的问候！

Highcharts渠道可视化的标签

1 个答案: