javascript - Highchart 漏斗可视化的标签

Question

我正在尝试创建一个漏斗图可视化，以可视化客人数量以及 3 类消费者的先前访问百分比:1 次访问、2 次访问、3 次以上访问。

现在每个类别都有 2 个标签(在右侧突出)，但我想为每个类别在右侧突出 1 个标签，说明客人数量和先前访问的百分比。我还想为漏斗的每个 block 添加一个盒形标签，这样当您将鼠标悬停在它上面时，它看起来像:

[CATEGORY]

Percent of Prior Visit: [VALUE]

Guests: [VALUE]

现在，当我将鼠标悬停在 block 上时，框形标签只显示先前访问的百分比。所以我希望盒子固定好，右边的标签每 block 只有 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/