Highchart渠道可视化的标签

Question

我正在尝试创建一个漏斗可视化，以可视化来宾人数以及3个类别的消费者之前的访问百分比：1次访问，2次访问，3次以上访问。

现在，我为每个类别都贴了2个标签（在右侧显示），但是我希望每个类别都贴上右侧的1个标签，其中标明了访客人数和之前访问的百分比。我还希望为漏斗的每个块添加一个盒形标签，以便将鼠标悬停在它上面时看起来像这样：

[CATEGORY]

Percent of Prior Visit: [VALUE]

Guests: [VALUE]

现在，当我将鼠标悬停在块上时，该盒形标签仅显示“先前访问的百分比”。因此，我希望将盒子固定好，将右侧的标签每个块固定为1个。我希望这是有道理的。我该怎么做？预先感谢。

我的代码位于：https://jsfiddle.net/ug4rc6pn/150/

Answer 1

使用您之前尝试过的样式会更容易。也就是说，在同一系列中同时设置值和百分比，如下所示：

 series: [{
  name: 'Guests',
  data: [{
      y: 352000,
      yPercentage: 100,
      name: '1 Visit',
      color: "#ff0000",
    },
    ...
  ]
}]

然后您可以像这样格式化数据标签：

dataLabels: {
  enabled: true,
  format: '<b>{point.name}</b> <br/>{point.y:,.0f} ({point.yPercentage} %)',
  ...
}

您的工具提示如下：

tooltip: {
  headerFormat: '<span style="font-size: 10px"><b>{point.key}</b></span><br/>',
  pointFormat: 'Percent of Prior Visit: {point.yPercentage} % <br/>Guests: {point.y:,.0f}  '
}

哪个给你的？

Highcharts.chart('container', {
  chart: {
    type: 'funnel',
    //Only for Pie Charts
    options3d: {
      enabled: false, // change to true to activate 3D
      alpha: 40,
      beta: 40,
      depth: 100,
    },
  },
  title: {
    text: 'Guest Return Funnel'
  },
  plotOptions: {
    funnel: {
      depth: 100
    },
    series: {
      events: {
        legendItemClick: function() {
          $.each(this.chart.series, function(i, serie) {
            if (serie.visible)
              serie.hide();
            else
              serie.show();
          });
          return false;
        }
      },
      shadow: true,
      allowPointSelect: true,
      borderWidth: 18,
      animation: {
        duration: 400
      },
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b> <br/>{point.y:,.0f} ({point.yPercentage} %)',
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
        softConnector: true,
        crop: false
      },
      center: ['50%', '50%'],
      neckWidth: '40%',
      neckHeight: '0%',
      width: '65%',
      height: '100%',
      tooltip: {
      	headerFormat: '<span style="font-size: 10px"><b>{point.key}</b></span><br/>',
      	pointFormat: 'Percent of Prior Visit: {point.yPercentage} % <br/>Guests: {point.y:,.0f}  '
      }
    }
  },
  legend: {
    enabled: true
  },
  series: [{
      name: 'Guests',
      data: [{
          y: 352000,
          yPercentage: 100,
          name: '1 Visit',
          color: "#ff0000",
        },
        {
          y: 88000,
          yPercentage: 25,
          name: '2 Visits',
          color: "#FFA500",
        },
        {
          y: 42000,
          yPercentage: 48,
          name: '3+ Visits',
          color: "#32CD32"
        }
      ]
    }
  ]
});
/*    
series: [{
name: 'Guests',
name2: 'Percent of Prior Visit',
data: [{
y:352000,
name: '1 Visit',
color: "#ff0000",
y2: 100,
name2: 'Percent of Prior Visit'
},
{
y: 88000,
name: '2 Visits',
color: "#FFA500",
y2: 25,
name2: 'Percent of Prior Visit',
},
{
y: 42000,
name: '3+ Visits',
color:"#32CD32",
y2: 48,
name2: 'Percent of Prior Visit'
}
]
}]
});
*/

<script src="https://code.highcharts.com/highcharts.js">


</script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>

JSFiddle工作示例： https://jsfiddle.net/ewolden/org6quk9/