Question

第一次使用JS和HighCharts ......但我会尝试制定一个问题，这样才有意义！

目前我只处理了4个数据源，这非常容易投入到高级图表中。

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

我的数字是：349531093,156777100,572480,7和0。

第一个数字和第二个数字覆盖整个漏斗，这使得情节非常缺乏吸引力，并且难以在视觉上看到这些值。（是的，是的 - 标签很棒，但我希望能够在视觉上看到每个部分。）

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

所以我试着用不同的限制来玩，比如：

minSize - 饼图响应自动边距的最小尺寸。馅饼会尝试缩小，以便为数据标签留出空间绘图区域，但仅限于此大小。（这正是它所说的，所以我不确定为什么我甚至试过它......）
尺寸 - 那只是改变了整个图表的大小....

 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上发布此内容！）

但是我创建了一个简单的例子，您可以预处理数据并仍显示正确的值：http://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]
    }
}

当然，这只是解决方法。您还需要使用格式化工具提示来确保显示正确的值（例如dataLabels）。

Answer 2

我采用了PawełFus的很好的例子并将其扩展到包括工具提示校正。只需添加以下代码段：

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

Jsfiddle with a working example:

<强> 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
        }]
    });
});

Answer 3

您可以先通过记录来尝试规范化值。

log（349531093）= 8.5
日志（572480）= 5.75

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

3 个答案: