javascript - HighCharts Funnel - 设置每个部分的最小尺寸

Question

第一次使用 JS 和 HighCharts...但我会尝试提出一个问题，这样它才有意义!

目前我只使用 4 个数据源，这非常容易直接放入 highcharts。

问题是，这 4 个合计数字是......好吧，不是很一致。

我的 atm 号码是:349531093、156777100、572480、7 和 0。

第一个数字和第二个数字覆盖了整个漏斗，这使得绘图非常没有吸引力并且很难直观地看到值。(是的，是的 - 标签很棒，但我希望能够直观地看到每个部分)。

我一直在阅读漏斗图的文档，但我找不到以任何方式限制部分大小的方法。

所以我试着尝试使用不同类型的限制，例如:

• minSize - 饼图响应自动边距的最小尺寸。馅饼将尝试缩小以便为数据标签腾出空间绘图区域，但仅限于此大小。 (它完全按照它说的做，所以我不确定为什么我什至尝试过...)

• size - ofc 刚刚改变了整个图表的大小....

 series: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b> ({point.y:,.0f})',                    
                minSize: '10%',
                color: 'black',
                softConnector: true
            },
            neckWidth: '50%',
            neckHeight: '50%',
            minSize: '20%',
           
            //-- Other available options
            height: '200'
            // width: pixels or percent
        }

你可以在这里看到我可怕的尝试:JSFiddle thingy

那么对于实际问题:是否可以为漏斗中的部分设置最小限制？

任何建议或只是一个简单的:“伙计，不可能”，我们​​将不胜感激!

干杯!

Answer 1

不幸的是，这不受支持(在 userVoice 上发布这个是个好主意!)

但是我创建了一个简单的示例，您可以预处理数据并仍然显示正确的值:https://jsfiddle.net/69eey/2/

$(function () {
var dataEx = [
            ['Raw Events', 349531093],
            ['Filtered/Aggregated Events',       156777100],
            ['Correlated Events', 2792294],
            ['Use Case Events',    572480],
            ['Finalized',    0]
        ],
    len = dataEx.length,
    sum = 0,
    minHeight = 0.05, 
    data = [],
    i;

for(i = 0; i < len; i++){
    sum += dataEx[i][1];
}

for(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]
    }
}

当然这只是解决方法。您还需要为工具提示使用格式化程序，以确保您将显示正确的值(例如数据标签)。