2

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

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

问题是，4 个汇总数字是……嗯，不是很一致。

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

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

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

所以我尝试使用不同类型的限制，比如：

  • minSize - 饼图响应自动边距的最小尺寸。饼图将尝试缩小以为绘图区域一侧的数据标签腾出空间，但仅限于这个大小。（这正是它所说的，所以我不确定我为什么要尝试它......）

  • 大小- 那个 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

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

任何建议或只是一个简单的：“老兄，不可能”表示赞赏！

干杯!

4

3 回答 3

5

不幸的是，这不受支持（在 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]
    }
}

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

于 2013-05-22T11:57:07.240 回答
3

我采用了 Paweł Fus 的出色示例并将其扩展为包括工具提示更正。只需添加以下代码段：

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

JSFiddle 有一个工作示例：

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
        }]
    });
});
于 2014-04-11T21:45:36.270 回答
1

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

  • 日志（349531093）=8.5
  • 日志（572480）=5.75
于 2013-05-21T09:15:08.577 回答