0

私はすでにデータを変更し（nullから範囲外の数値に）、colorAxisの最小値と最大値と色の停止をいじってみましたが、それが単一のマップの場合は機能しますが、私がしていることには機能しません。

クリック イベントでコードをハングアップできるようにする必要があります。

ありがとう

https://jsfiddle.net/alex_at_pew/nbz9npyg/5/

$(function () {
    // Instantiate the map
    $('#container').highcharts('Map', {
        plotOptions: {
            map: {
                events: {
                    mouseOver: function (e) {
                        console.log(e);
                    }
                }
            }
        },
        chart : {
            borderWidth : 1
        },
        title : {
            text : 'Nordic countries'
        },
        subtitle : {
            text : 'Demo of drawing all areas in the map, only highlighting partial data'
        },
        legend: {
            enabled: false
        },
        colorAxis: {
            dataClasses: [{
                from: -100,
                to: 1,
                color: '#C40401',
                name: 'pseudonull(1s are the new null)'
            }],
        },
        series : [{
            name: 'Country',
            mapData: Highcharts.maps['custom/europe'],
            data: [
                {
                    code: 'DE',
                    value: 1
                }, {
                    code: 'IS',
                    value: 2
                }, {
                    code: 'NO',
                    value: 2
                }, {
                    code: 'SE',
                    value: 2
                }, {
                    code: 'FI',
                    value: 2
                }, {
                    code: 'DK',
                    value: 2
                }
            ],
            joinBy: ['iso-a2', 'code'],
            dataLabels: {
                enabled: true,
                color: 'white',
                formatter: function () {
                    if (this.point.value > 1) {
                        return this.point.name;
                    } else if(this.point.value == 1) {
                        return 'this is "null"';
                    }
                }
            },
            tooltip: {
                headerFormat: '',
                pointFormat: '{point.name}'
            }
        }]
    });
});
4

1 に答える 1

0

何を達成しようとしているのかよくわかりませんが、私の理解では、NULL値を持つ国にクリックイベントを添付したいと考えています。

ここでこの例を作成しました: http://jsfiddle.net/on6v5vhr/

どうやら、国の値が NULL の場合、クリック イベントを発生させることはできませんが、私が行ったことはこの動作をシミュレートすることなので、次の手順を実行しました。

データを処理し、すべてのヌル値に同じ特定の値を与えます (フランスはヌルだったので、-999 の値を与えました)

{code: 'FR', value: -999}

値があり、その値が -999 以外の国のデータラベルのみを表示する

formatter: function() {
    if (this.point.value && (this.point.value !== -999)) {
        return this.point.name;
    }
}

-999 以外の値を持つ国のツールチップのみを表示する

tooltip: {
    formatter: function() {
        if (this.point.value !== -999) {
            return this.point.name;
            } else {
                return false;
            }
        }
    }

-999 の値を持つすべての国の NULL 色と同じ色を手動で設定します

colorAxis: {
    dataClasses: [{
        from: -100,
        to: 1,
        color: '#C40401',
        name: 'pseudonull(1s are the new null)'
    }, {
        from: -999,
        to: -999,
        color: 'rgba(0,0,0,0)',
        name: 'No data'
    }],
}
于 2015-08-16T22:24:51.443 に答える