Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/date/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 谷歌饼图动画的切片颜色_Javascript_Animation_Google Visualization - Fatal编程技术网

Javascript 谷歌饼图动画的切片颜色

Javascript 谷歌饼图动画的切片颜色,javascript,animation,google-visualization,Javascript,Animation,Google Visualization,我有一个谷歌饼图,我尝试使用简单的JavaScript代码来制作动画 我想换一下馅饼片的颜色。为什么我的代码不起作用 google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data1 = google.visualization.arrayToDataTable([ ['Tas

我有一个谷歌饼图,我尝试使用简单的JavaScript代码来制作动画

我想换一下馅饼片的颜色。为什么我的代码不起作用

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);   

function drawChart() {
  var data1 = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['A1', 0],
  ['Failed',1],
  ['A2', 0],
  ['Passed', 3],     
]);

 var colors1 = ['#ef7777', '#ef7777', '#b2d284', '#b2d284', '#f6c7b6'];
 var colors2 =  ['#ff00ff', '#ff00ff', '#02d2ff', '#02d2ff', '#f6c7b6'];
 var colors3 = colors2;

var options1 = {'title':'Logic', 'width':'50%', 'height':'50%', legend:{position:'none'}, 'is3D':true,  
chartArea: {width: '70%', height: '70%'},  
colors: colors3,    
    'backgroundColor': '#fef7f8',
    pieSliceTextStyle: {
            color: '#000000',
            bold: true,
            fontSize:16
        }
  }; 

var chart1 = new google.visualization.PieChart(document.getElementById('piechart1')); 

  chart1.draw(data1, options1);
  var percent = 0;
        var handler = setInterval(function(){
            // values increment
            percent += 1;
            if (percent%2 == 1) {
            colors3 = colors1;
            }
            else
            {
            colors3 = colors2;
            }
            chart1.draw(data1, options1);

            if (percent > 74)

                clearInterval(handler);
        }, 333);  
}
因此,我在这里为我的饼图设置了两个带有颜色集的数组。第一种颜色是红色和绿色,第二种颜色是蓝色和紫色


我希望使用函数“setInterval”在这些颜色集之间连续切换。

颜色是您的选项对象的关键。setInterval调用的回调函数更改了一个名为colors3的变量,但您没有将其分配给原始对象,因此它永远不会被使用

    if (percent % 2 == 1) {
      colors3 = colors1;
    } else {
      colors3 = colors2;
    }
    options1.colors = colors3; // here we're assigning it!
    chart1.draw(data1, options1);

你的问题是什么?为什么我的代码不起作用?如何通过更改饼图颜色来制作饼图动画。。。?