2

JS と HighCharts を扱うのは初めてですが、意味が通じるように質問を作成してみます。

現在、私は 4 つのデータ ソースしか扱っていませんが、これは非常に簡単にハイチャートに反映できます。

問題は、4 つの集計された数値が... まあ、あまり一貫性がないことです。

私が持っている ATM の番号は、349531093、156777100、572480、7、および 0 です。

最初の数値と 2 番目の数値が目標到達プロセス全体をカバーしているため、プロットが非常に魅力的ではなく、値を視覚的に確認するのが難しくなっています。(ええ、ええ - ラベルは素晴らしいですが、各セクションを視覚的に確認できるようにしたいのです)。

ファンネルプロットのドキュメントを読んでいますが、セクションサイズを制限する方法が見つかりません。

そこで、次のようなさまざまな種類の制限で少し遊んでみました。

  • 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

実際の質問: ファネルのセクションに最小制限を設定することは可能ですか?

任意の提案または単純な「おい、不可能」は大歓迎です!

乾杯！

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 に答える