Javascript Highchart漏斗可视化的标记

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

现在我每个类别有2个标签（突出在右手边），但我希望每个类别有1个标签，突出在右手边，说明客人人数和之前访问的百分比。我还希望漏斗的每一块都有一个盒子形状的标签，这样当你将鼠标悬停在上面时，它看起来像：

[CATEGORY]

Percent of Prior Visit: [VALUE]

Guests: [VALUE]

现在，当我将鼠标悬停在区块上时，框形标签仅显示先前就诊的百分比。所以我希望盒子是固定的，右边的标签是每一块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}  '
}

然后，您可以按如下方式格式化数据标签：

 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}  '
}

数据标签：{
启用：对，
格式：{point.name}
{point.y:，.0f}（{point.yPercentage}%），
...
}

您的工具提示如下所示：

 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}  '
}

工具提示：{
headerFormat:“{point.key}
”，
pointFormat:'上次访问的百分比：{point.yPercentage}%
来宾：{point.y:，.0f}'
}

这就给了你：

Highcharts.chart（'container'{
图表：{
类型：'漏斗'，
//仅适用于饼图
选项3D：{
enabled:false，//更改为true以激活3D
阿尔法：40，
贝塔：40，
深度：100，
},
},
标题：{
文本：“客人回程漏斗”
},
打印选项：{
漏斗：{
深度：100
},
系列：{
活动：{
legendItemClick:函数（）{
$.each（this.chart.series，function（i，serie）{
如果（系列可见）
serie.hide（）；
其他的
serie.show（）；
});
返回false；
}
},
影子：没错，
allowPointSelect:true，
边框宽度：18，
动画：{
持续时间：400
},
数据标签：{
启用：对，
格式：{point.name}
{point.y:，.0f}（{point.yPercentage}%），
颜色：（Highcharts.theme&&Highcharts.theme.ContractTextColor）| |“黑色”，
软连接器：正确，
作物：假
},
中心：['50%，'50%']，
领口宽度：“40%”，
颈部高度：“0%”，
宽度：“65%”，
高度：“100%”，
工具提示：{
headerFormat:“{point.key}
”，
pointFormat:'上次访问的百分比：{point.yPercentage}%
来宾：{point.y:，.0f}'
}
}
},
图例：{
已启用：true
},
系列：[{
姓名：'客人'，
数据：[{
y:352000，
人口：100，
名称：“1次访问”，
颜色：“ff0000”，
},
{
y:88000，
人口：25，
名称：“2次访问”，
颜色：“FFA500”，
},
{
y:42000，
人口：48，
名称：“3+次访问”，
颜色：“32CD32”
}
]
}
]
});
/*    
系列：[{
姓名：'客人'，
名称2:‘以前就诊的百分比’，
数据：[{
y:352000，
名称：“1次访问”，
颜色：“ff0000”，
y2:100，
名称2:“以前就诊的百分比”
},
{
y:88000，
名称：“2次访问”，
颜色：“FFA500”，
y2:25，
名称2:‘以前就诊的百分比’，
},
{
y:42000，
名称：“3+次访问”，
颜色：“32CD32”，
y2:48，
名称2:“以前就诊的百分比”
}
]
}]
});
*/

---

谢谢。实际上，我已经重新格式化了漏斗，使标签居中，并实现了缩放算法，以便可视化显示小值。但是，我现在输入该系列数据的方式不同了。如果没有我现在使用的新数据格式，我将如何做您刚才所做的事情？如果不可能或很难使用像[label，value]这样的数据格式，那么在算法仍然有效的情况下，如何使用我之前使用的格式？打开我的密码，你就会明白我的意思了。在