Javascript HighCharts漏斗-设置每个截面的最小尺寸

第一次使用JS和HighCharts。。。但我会尝试提出一个有意义的问题

目前，我只使用了4个数据源，这非常容易直接加入到图表中

问题是，4个聚合数字是。。。嗯，不太一致

我的atm机号码是：349531093、15677100、572480、7和0

第一个数字和第二个数字覆盖了整个漏斗，这使得绘图非常缺乏吸引力，很难直观地看到值。 （是的，是的-标签非常出色，但我希望能够直观地看到每个部分）

我一直在阅读漏斗图的文档，但我找不到任何方法来限制截面尺寸

所以我尝试了一些不同的限制，比如：

• minSize-饼图响应自动边距的最小大小。饼图将尝试缩小，以便在侧面为数据标签腾出空间 绘图区域，但仅限于此大小。（这正是它所说的， 所以我不知道我为什么要尝试……）

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

系列：{
数据标签：{
启用：对，
格式：“{point.name}（{point.y:，.0f}）”，
minSize：“10%”，
颜色：'黑色'，
软连接器：正确
},
领口宽度：“50%”，
领高：50%，
minSize：“20%”，
//--其他可用选项
高度：'200'
//宽度：像素或百分比
}

你可以在这里看到我可怕的尝试：

因此，对于实际问题：是否有可能为漏斗中的部分设置最小限制

任何建议或只是一个简单的：“哥们，不可能”是感激

---

干杯

您可以先通过获取日志来尝试规范化这些值

• 对数（349531093）=8.5
• 对数（572480）=5.75

---

不幸的是，这不受支持（最好在userVoice上发布！）

但是，我创建了一个简单的示例，您可以预处理数据并仍然显示正确的值：

$（函数（）{
var dataEx=[
['Raw Events'，349531093]，
[“过滤/聚合事件”，15677100]，
[“相关事件”，2792294]，
[‘用例事件’，572480]，
[‘已定稿’，0]
],
len=数据长度，
总和=0，
最小高度=0.05，
数据=[]，
我
对于（i=0；iminHeight？t[1]：总和*minHeight），
标签：t[1]
}
}

---

当然，这只是一种解决方法。您还需要使用formatter作为工具提示，以确保显示正确的值（如数据标签）。

我以PawełFus的伟大示例为例，对其进行了扩展，以包括工具提示更正。只需添加以下代码片段：

tooltip: {
    formatter: function() {
        return '<b>'+ this.key  +
            '</b> = <b>'+ Highcharts.numberFormat(this.point.label, 0) +'</b>';
    }
},

工具提示：{
格式化程序：函数（）{
返回“”+此.key+
“=”+Highcharts.numberFormat（this.point.label，0）+”；
}
},

HTML

<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: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

$(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 = [];
    
    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 ),
            label: t[1]
        }
    }
    $('#container').highcharts({
        chart: {
            type: 'funnel',
            marginRight: 100
        },
        title: {
            text: 'SEIM Metrics',
            x: -50
        },
        tooltip: {
            //enabled: false
            formatter: function() {
                return '<b>'+ this.key  +
                    '</b> = <b>'+ Highcharts.numberFormat(this.point.label, 0) +'</b>';
            }
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    formatter: function(){
                      var point = this.point;  
                        console.log(point);
                      return '<b>' + point.name + '</b> (' + Highcharts.numberFormat(point.label, 0) + ')'; 
                    },                
                    minSize: '10%',
                    color: 'black',
                    softConnector: true
                },
                neckWidth: '50%',
                neckHeight: '50%',
                //-- Other available options
                height: '200'
                // width: pixels or percent
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Unique users',
            data: data
        }]
    });
});

$（函数（）{
var dataEx=[
['Raw Events'，349531093]，
[“过滤/聚合事件”，15677100]，
[“相关事件”，2792294]，
[‘用例事件’，572480]，
[‘已定稿’，0]
],
len=数据长度，
总和=0，
最小高度=0.05，
数据=[]；
对于（变量i=0；iminHeight？t[1]：总和*minHeight），
标签：t[1]
}
}
$（“#容器”）。高图({
图表：{
类型：'漏斗'，
marginRight:100
},
标题：{
文本：“SEIM度量”，
x:-50
},
工具提示：{
//已启用：false
格式化程序：函数（）{
返回“”+此.key+
“=”+Highcharts.numberFormat（this.point.label，0）+”；
}
},
打印选项：{
系列：{
数据标签：{
启用：对，
格式化程序：函数（）{
var点=此点；
控制台日志（点）；
返回“+point.name+”（“+Highcharts.numberFormat（point.label，0）+”）；
},                
minSize：“10%”，
颜色：'黑色'，
软连接器：正确
},
领口宽度：“50%”，
领高：50%，
//--其他可用选项
高度：'200'
//宽度：像素或百分比
}
},
图例：{
已启用：false
},
系列：[{
名称：“唯一用户”，
数据：数据
}]
});
});

在这种情况下，绘制图表有什么意义呢？如果你绘制的图表不能准确地表示数据，那么它就没有任何用处了。好吧，图表可能仍然有视觉效果，而且如果两个图表使用相同的数据表示方法，它将有助于直观地比较它们。啊，看，这很接近我在找什么！谢谢你，好先生！

$(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 = [];
    
    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 ),
            label: t[1]
        }
    }
    $('#container').highcharts({
        chart: {
            type: 'funnel',
            marginRight: 100
        },
        title: {
            text: 'SEIM Metrics',
            x: -50
        },
        tooltip: {
            //enabled: false
            formatter: function() {
                return '<b>'+ this.key  +
                    '</b> = <b>'+ Highcharts.numberFormat(this.point.label, 0) +'</b>';
            }
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    formatter: function(){
                      var point = this.point;  
                        console.log(point);
                      return '<b>' + point.name + '</b> (' + Highcharts.numberFormat(point.label, 0) + ')'; 
                    },                
                    minSize: '10%',
                    color: 'black',
                    softConnector: true
                },
                neckWidth: '50%',
                neckHeight: '50%',
                //-- Other available options
                height: '200'
                // width: pixels or percent
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Unique users',
            data: data
        }]
    });
});