Question

我目前正在研究一个项目，该项目研究过去2.5年中“ brexit”一词的相对搜索流量。我已经制作了地图，但是正在努力解决一些生活质量问题。我正在使用R-Map和Datamap。首先是在地图上添加图例标题。我知道标题可能应该在这一步添加：

#Data maps base map.
options(rCharts.cdn = TRUE)
map <- Datamaps$new()  
map$set(
  dom  = 'chart_1',
  scope = 'world',
  fills = fills,
  data = datm3[[1]],
  legend = TRUE, 
  labels = FALSE
)

map

在此处创建图例标题需要显示“相对每月搜索流量”。

我的第二个问题是关于交互式组件的。当前围绕滑块的工作是使用介于1到30之间的值，但实际上，这些值应该是从2017年1月到2018年6月的每月增量。如何将代码添加到angularjs部分，以将滑块上的1-30的值更改为字符“ Jan-2016”至“ Jun-2018”？该部分的相对代码在这里：

#Interactive slider component. 
map2 = map$copy()
map2$set(
  bodyattrs = "ng-app ng-controller='rChartsCtrl'"
)
map2$addAssets(
  jshead = "http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"
)

map2$setTemplate(chartDiv = "
  <div class='container'>
                 <input id='slider' type='range' min = 1 max = 30 ng-model='Year' width=500>
                 <span ng-bind='Year'></span>
                 <div id='chart_1' class='rChart datamaps'></div>  
                 </div>
                 <script>
                 function rChartsCtrl($scope){
                 $scope.Year = 1;
                 $scope.$watch('Year', function(newYear){
                 mapchart_1.updateChoropleth(chartParams.newData[newYear]);
                 })
                 }
                 </script>"
)

map2$set(newData = datm3)
map2

我的数据可以从这里下载：https://drive.google.com/open?id=1xBqApmzAzzYHwDIEuxYiksO5bw5N7EBp

完整代码在这里：

#Packages for install.
install.packages("reshape2")
install.packages("Quandl")
install.packages("plyr")
install.packages("rMaps")
install.packages("datamaps")
install.packages("rgdal")
install.packages("kableExtra")
install.packages("funModeling")
install.packages("discretization")
install.packages("sf")
install.packages("maptools")
install.packages("RColorBrewer")
install.packages("countrycode")
install.packages("AngularJS")
#Packages for run. 
library(reshape2)                 
library(Quandl)
library(plyr)
library(rCharts)
library(rMaps)
library(datamaps)
library(kableExtra)
library(funModeling)
library(discretization)
library(rgdal)
library(sf)
library(maptools)
library(RColorBrewer)
library(countrycode)
library(ggplot2)

#Find Brexit data set.Obvisouly set your own WD here. 
Brexit.Data <- read.csv("E:/MSc Disso/Transposed Brexit.csv", check.names = FALSE)
#Melt Brexit data set.
datm <- melt(Brexit.Data, 'Year',
             variable.name = 'Country',
             value.name = 'Search Frequency',
             check.names = FALSE

)

#Add breaks to data.                             
datm2 <- transform(datm,
                   Country = countrycode(datm[,2], origin = "country.name", destination = "iso3c"),
                   fillKey = cut(datm[,3],breaks = c(-Inf,0,9,19,49,Inf),labels = c("0","1-9","10-19","20-49","50+"))
)

datm2 <- subset(na.omit(datm2))

#Define CB pallet.
fills = setNames(
  c(RColorBrewer::brewer.pal(5, 'PuBu'),'black'),
  c(c("0","1-9","10-19","20-49","50+"))
)

#Payload creation for data maps. 
datm3 <- dlply(na.omit(datm2), "Year", function(x){
  y= toJSONArray2(x, json = F)
  names(y) = lapply(y, '[[', 'Country')
  return(y)
})

datm3

#Data maps base map.
options(rCharts.cdn = TRUE)
map <- Datamaps$new()  
map$set(
  dom  = 'chart_1',
  scope = 'world',
  fills = fills,
  data = datm3[[1]],
  legend = TRUE, 
  labels = FALSE
)

map

#Interactive slider component. 
map2 = map$copy()
map2$set(
  bodyattrs = "ng-app ng-controller='rChartsCtrl'"
)
map2$addAssets(
  jshead = "http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"
)

map2$setTemplate(chartDiv = "
  <div class='container'>
                 <input id='slider' type='range' min = 1 max = 30 ng-model='Year' width=500>
                 <span ng-bind='Year'></span>
                 <div id='chart_1' class='rChart datamaps'></div>  
                 </div>
                 <script>
                 function rChartsCtrl($scope){
                 $scope.Year = 1;
                 $scope.$watch('Year', function(newYear){
                 mapchart_1.updateChoropleth(chartParams.newData[newYear]);
                 })
                 }
                 </script>"
)

map2$set(newData = datm3)
map2



#Autoplay function. 
map3 = map2$copy()
map3$setTemplate(chartDiv = "
  <div class='container'>
    <button ng-click='animateMap()'>Play</button>
    <div id='chart_1' class='rChart datamaps'></div>  
  </div>
  <script>
    function rChartsCtrl($scope, $timeout){
      $scope.year = 1;
      $scope.animateMap = function(){
        if ($scope.year > 30){
          return;
        }
        mapchart_1.updateChoropleth(chartParams.newData[$scope.year]);
        $scope.year += 1
        $timeout($scope.animateMap, 1000)
      }
    }
  </script>"
)

map3

在此先感谢您的帮助！

R-Maps / Datamaps / AngularJS：如何向我的地图添加图例标题。

0 个答案: