Question

我当前的可视化如下：

$(function() {
  var dataEx = [
      ['1 Visit', 352000],
      ['2 Visits', 88000],
      ['3+ Visits', 42000]
    ],
    len = dataEx.length,
    sum = 0,
    minHeight = 0.05,
    data = [];
    
   //specify your percent of prior visit value manually here:
   
   var perc = [100, 25, 48];

  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),
      percent: perc[i],   // <----- this here is manual input
			//percent: Math.round(r * 100),    <--- this here is mathematical
      label: t[1]
    }
  }
  console.log(dataEx, data)
  $('#container').highcharts({
    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)
            })
          })
        }
      },
    },

    title: {
      text: 'Guest Return Funnel',
      x: -50
    },
    tooltip: {
      //enabled: false
      formatter: function() {
        return '<b>' + this.key +
          '</b><br/>Percent of Prior Visit: '+ this.point.percent + '%<br/>Guests: ' + Highcharts.numberFormat(this.point.label, 0);
      }
    },
    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) + ')<br/>' + point.percent + '%';
          },
          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: 500px; height: 400px; margin: 0 auto"></div>

我想执行以下操作（一张说明我想要的HERE照片）：

将类别名称“ 1次访问”，“ 2次访问”，“ 3次访问”添加到左侧漏斗。
为每个类别的客人安排宾客数量和百分比漏斗，使其看起来像（位于漏斗内部）：

352K 100％

现在我具有像352000这样的整数值，但是想知道是否有一种方法可以使所有以000结尾的数字成为最后是“ K”。

如果我还可以为这两个值添加标签，那就太好了渠道的顶部（“访客”和“先前访问的百分比”）。
在漏斗的右侧添加2个标签，分别称为“ Q1 / 17 TTM”和“ Avg 值”，并为渠道的每个类别放置值标签下方。 “ Q1 / 17 TTM”的值应为红色，并且 “平均价值”的值应为灰色。

“ Q1 / 17 TTM”的值从“ 2次访问”开始，直到底部（在最后一个类别下）

“平均价值”的值从第一个类别开始，到最后一个类别结束类别。
在可视化的最底部，有一个值。不用担心这是什么（照片中的价值为1290万美元）。

并且我希望这些更改仍然可以使数据处理算法可视化小的值。我非常感谢您的帮助！谢谢。

Answer 1

Highcharts中没有任何选项可以处理多个数据标签，但是您可以使用 text SVGRenderer 添加其他文本元素，例如：

        events: {
            render: 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)
                    });

                    if (p.dataLabel1) {
                        p.dataLabel1.destroy();
                        p.dataLabel2.destroy();
                    }

                    p.dataLabel1 = chart.renderer.text(p.name, p.dataLabel.x - 150, p.dataLabel.y + chart.plotTop - bBox.y).add();

                    p.dataLabel2 = chart.renderer.text('some Text', p.dataLabel.x + 150, p.dataLabel.y + chart.plotTop - bBox.y).add();
                });
            }
        }

实时演示：https://jsfiddle.net/BlackLabel/w2cs4ufe/1/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

在Highcharts渠道可视化的左侧或右侧添加标签

1 个答案: