如何添加一個標籤軸線

我的圖非常相似，這個例子：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²' 
       } 
      }] 
     }); 
    }); 
});

我需要添加一個標籤來顯示顯示的所有數據的平均軸線。理想情況下，使用圖例中位置的標記。當您將鼠標懸停在地圖上時，該軸上顯示的相同標記顯示您指向的顏色與圖例的關係。

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

來源

2016-11-04 MrFox

您可以通過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/

來源

2016-11-04 11:28:46 morganfree

如何添加一個標籤軸線

回答

相關問題