Question

我有一个包含多个Google图表的页面。我还有一个页面级别的下拉菜单。当用户更改此下拉列表中的值时，我会刷新/重新加载图表。

一切正常，但值选择和图表更新之间有几秒钟的延迟。我想在刷新所有图表之前在页面上显示加载效果叠加和图像。

问题在于我无法在Google图表上叠加此效果。加载效果javascript确实触发，背景变灰，但加载图像隐藏在图表后面。

解决问题的方法：https://jsfiddle.net/0tj1pzsk/14/

如何在微软图表上叠加微调图像？将微调器图像放置在图表div中只会显示第一个图表加载而不是后续刷新

代码：

CSS

#loading-img {
  background: url(https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif) center center no-repeat;
  height: 100%;
  z-index: 20;
}

.loading {
  background: #a3a3a3;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
}

Javascript

$('#test').click( function() {
  $('.loading').show(); 
});

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Threat', 'Attacks'],
    ['Chandrian', 38],
    ['Ghosts', 12],
    ['Ghouls', 6],
    ['UFOs', 44],
    ['Vampires', 28],
    ['Zombies', 88]
  ]);

  var options = {
    legend: 'none',
    colors: ['#760946'],
    vAxis: { gridlines: { count: 4 } }
  };

  var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
  chart.draw(data, options);
};

 html

 <button id="test">test</button>
 <div class="loading"><div id="loading-img"></div></div>
 <div id="line-chart"></div>

Answer 1

尝试移动css ......

library("datasets") #Allows me to map a name to each element in a numerical list. makeStrName<-function(listOfItems) { for(i in 1:length(listOfItems)) { names(listOfItems)[i]=paste("x",i,sep="") } return(listOfItems) } #Allows me to replace each random number in a vector with the corresponding #function in a list of functions. mapFuncList<-function(funcList,rndNumVector) { for(i in 1:length(funcList)) { replace(rndNumVector, rndNumVector==i,funcList[[i]]) } return(rndNumVector) } #Will generate a random function from the list of functions and a random sample. generateOrganism<-function(inputLen,inputSeed, functions) { set.seed(inputSeed) rnd<-sample(1:length(functions),inputLen,replace=T) Org<-mapFuncList(functions,rnd) return(Org) } #Will generate a series of "Organisms" genPopulation<-function(popSize,initialSeed,initialSize,functions) { population<-list("null") for(i in 2:popSize) { population <- c(population,generateOrganism(initialSize,initialSeed, functions)) initialSeed <- initialSeed+1 } populationWithNames<-makeStrName(population) return(populationWithNames) } #Turns the population of functions (which are actually strings in "") into #actual functions. (i.e. changes the mode of the list from string to function). populationFuncList<-function(Population) { Population[[1]]<-"x" funCreator<-function(snippet) txt=snippet function(x) { exprs <- parse(text = txt) eval(exprs) } listOfFunctions <- lapply(setNames(Population,names(Population)),function(x){funCreator(x)}) return(listOfFunctions) } #Applies a fitness function to the population. Puts the best organism in #the hallOfFame. evalPopulation<-function(myList=myList, dataForInput,desiredFuncOutput) { #rmse <- sqrt( mean( (sim - obs)^2)) hallOfFame<-list(1000000000) for(i in 1:length(populationFuncList)) { total<-0 for(z in 1:length(dataForInput)) { total<-c(total,(abs(myList[[i]]+(dataForInput[[z]])-desiredFuncOutput[[z]]))) } rmse<-sqrt(mean(total*total)) if(rmse<hallOfFame[[1]]) {hallOfFame[[1]]<-rmse} } return(hallOfFame) } #Function list, input data, output data (data to fit to) funcs<-list("x","log(x)","sin(x)","cos(x)","tan(x)") desiredFuncOutput<-list(1,2,3,4,5) dataForInput<-list(1,2,3,4,5) #Function calls POpulation<-genPopulation(4,1,1,funcs) myList <-populationFuncList(POpulation)[2:4] bestDude<-evalPopulation(myList,dataForInput,desiredFuncOutput) print(bestDude) [[1]] [1] 1.825742

来自......

z-index: 20;

到...

#loading-img

参见以下示例......

＆＃13;

.loading

＆＃13;

$('#test').click( function() {
 $('.loading').show(); 
});

    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.arrayToDataTable([
        ['Threat', 'Attacks'],
        ['Chandrian', 38],
        ['Ghosts', 12],
        ['Ghouls', 6],
        ['UFOs', 44],
        ['Vampires', 28],
        ['Zombies', 88]
      ]);

      var options = {
        legend: 'none',
        colors: ['#760946'],
        vAxis: { gridlines: { count: 4 } }
      };

      var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
      chart.draw(data, options);
    };

＆＃13;

#loading-img {
    background: url(https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif) center center no-repeat;
    height: 100%;

}

.loading {
    background: #a3a3a3;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    z-index: 20;
}

＆＃13;

加载效果在谷歌图表刷新

1 个答案: