如何在軸上添加標簽

Question

我的圖非常類似於此示例： http : //jsfiddle.net/MrFox1/n6vwqafg/

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>

<div id="container" style="height: 500px; min-width: 410px; max-width: 600px; margin: 0
auto">
</div>

$(function () {

    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function (data) {

        // Make codes uppercase to match the map data
        $.each(data, function () {
            this.code = this.code.toUpperCase();
        });

        // Instanciate the map
        Highcharts.mapChart('container', {

            chart: {
                borderWidth: 1
            },

            title: {
                text: 'US population density (/km²)'
            },

            legend: {
                layout: 'vertical',
                borderWidth: 0,
                backgroundColor: 'rgba(255,255,255,0.85)',
                floating: true,
                verticalAlign: 'middle',
                align: 'right',
                y: 25
            },

            mapNavigation: {
                enabled: true
            },

            colorAxis: {
                min: 1,
                type: 'logarithmic',
                minColor: '#EEEEFF',
                maxColor: '#000022',
                stops: [
                    [0, '#EFEFFF'],
                    [0.67, '#4444FF'],
                    [1, '#000022']
                ]
            },

            series: [{
                animation: {
                    duration: 1000
                },
                data: data,
                mapData: Highcharts.maps['countries/us/us-all'],
                joinBy: ['postal-code', 'code'],
                dataLabels: {
                    enabled: true,
                    color: '#FFFFFF',
                    format: '{point.code}'
                },
                name: 'Population density',
                tooltip: {
                    pointFormat: '{point.code}: {point.value}/km²'
                }
            }]
        });
    });
});

我需要在軸上添加一個標簽，以顯示所有顯示數據的平均值。 理想情況下，在圖例中使用位置標記。 將鼠標懸停在地圖上時，在軸上顯示的標記也相同，該標記顯示了您指向的顏色與圖例之間的關系。

已經計算出所有數字的平均值，這只是如何直觀地顯示出來。

Answer 1

您可以通過colorAxis.tickPositions （數組）或colorAxis.tickPositioner （回調）在色軸上設置刻度位置。 它將為指定的值創建一個勾號。 如果使用對數軸，則需要正確縮放這些值。

colorAxis: {

  tickPositions: [Math.log10(1), Math.log10(10), Math.log10(calculatedAverage), Math.log10(100), Math.log10(1000)], 

然后使用colorAxis.labels.formatter定義特定刻度的文本。

labels: {
            formatter: function () {
              return this.value == calculatedAverage 
                ? 'avg (' + this.value + ')'
                : this.value;
              }
            }

示例： http ： //jsfiddle.net/n6vwqafg/9/