Javascript googleapi:gauge动画_Javascript_Api_Gauge

Javascript googleapi:gauge动画

javascript api

Javascript googleapi:gauge动画,javascript,api,gauge,Javascript,Api,Gauge,我试图让谷歌仪表指针移动，但它没有移动，我已经设置了动画配置，因为它假设是在var选项中设置的，例如持续时间：1000和放松：“inAndOut”，我是谷歌API中的n00b，所以我尝试一下有人能帮我吗。这是我使用它的原因。代码正在工作，但是部分地，仪表指针应该缓慢地移动到它的最大值，但是，在我的情况下，它不会工作。这是代码 <html> <script type='text/javascript' src='https://www.google.com/jsapi'&g

我试图让谷歌仪表指针移动，但它没有移动，我已经设置了动画配置，因为它假设是在var选项中设置的，例如持续时间：1000和放松：“inAndOut”，我是谷歌API中的n00b，所以我尝试一下

有人能帮我吗。这是我使用它的原因。代码正在工作，但是部分地，仪表指针应该缓慢地移动到它的最大值，但是，在我的情况下，它不会工作。这是代码

<html>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Match',80],
    ]);

    var options = {
      width: 440, height: 140,
      greenFrom: 70, greenTo: 100,
      yellowFrom:50, yellowTo: 70,
      redFrom:0, redTo: 50,
      minorTicks: 5,
      animation:{
          duration: 1000,
          easing: 'inAndOut',
        },
      majorTicks : ['0','10','20','30','40','50','60','70','80','90','100']
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div<%=id%>'));
    chart.draw(data, options);
    clearChart();
  }
</script>
</html>


load（'visualization'，'1'，{packages:['gauge']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Label'，'Value']，
[Match'，80]，
]);
变量选项={
宽度：440，高度：140，
格林From:70，格林To:100，
黄色从：50，黄色到：70，
redFrom:0，redTo:50，
米诺蒂克斯：5，
动画：{
持续时间：1000，
放松：'无生气'，
},
主要字母：['0'、'10'、'20'、'30'、'40'、'50'、'60'、'70'、'80'、'90'、'100']
};
var chart=new google.visualization.Gauge（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
clearChart（）；
}

事实证明，这是我自己想出来的，在谷歌论坛上有一个很好的答案

诀窍是从0（或任何最小值）开始测量，然后稍后更新该值（使用setInterval（）或任何其他方法）

肯定有更好的方法来更新值，而不仅仅是编写一个新的数组，但你知道了

<html>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Match',0],
    ]);

    var options = {
      width: 440, height: 140,
      greenFrom: 70, greenTo: 100,
      yellowFrom:50, yellowTo: 70,
      redFrom:0, redTo: 50,
      minorTicks: 5,
      animation:{
          duration: 1000,
          easing: 'inAndOut',
        },
      majorTicks : ['0','10','20','30','40','50','60','70','80','90','100']
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div<%=id%>'));
    chart.draw(data, options);
    clearChart();

    // This is new.
    setTimeout(function(){
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Match',80],
      ]);
      chart.draw(data, options);
    }, 200);
  }
</script>
</html>


load（'visualization'，'1'，{packages:['gauge']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Label'，'Value']，
['Match'，0]，
]);
变量选项={
宽度：440，高度：140，
格林From:70，格林To:100，
黄色从：50，黄色到：70，
redFrom:0，redTo:50，
米诺蒂克斯：5，
动画：{
持续时间：1000，
放松：'无生气'，
},
主要字母：['0'、'10'、'20'、'30'、'40'、'50'、'60'、'70'、'80'、'90'、'100']
};
var chart=new google.visualization.Gauge（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
clearChart（）；
//这是新的。
setTimeout（函数（）{
var data=google.visualization.arrayToDataTable([
['Label'，'Value']，
[Match'，80]，
]);
图表绘制（数据、选项）；
}, 200);
}

现在不确定这是否对任何人都有帮助，但我发现使用setValue方法将我从静态变为动画。下面是一个代码片段（我有许多gauge小部件，因此是数组）

我也有同样的问题。。。我在几周前玩过它，它工作得很好，但现在它根本没有动画。请检查你的代码，因为它会产生错误。我通过添加一个带有div的主体（id为

chart\u div

并在

chart

的初始化中更改

getElementId

参数）来绘制仪表

// set up the value here that we are moving from - this allows the gauge needle to animate when we set the actual value later
if (!widgetArray[i].googleArrayToDataTable) { // check if we've initialised

    widgetArray[i].googleArrayToDataTable = new google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      [widgetArray[i].label, 0]
    ]);
}
else {

    widgetArray[i].googleArrayToDataTable = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      [widgetArray[i].label, (widgetArray[i].googleOldNeedleValue * widgetArray[i].dialMax / widgetArray[i].googleOldDialMax)]
    ]);
}
// remember these values - I need to do this for my application to ensure the needle looks ok when switching values
widgetArray[i].googleOldNeedleValue = widgetArray[i].needleVal;
widgetArray[i].googleOldDialMax = widgetArray[i].dialMax;

majorTickIncrement = widgetArray[i].dialMax / 5;

var options;

if (widgetArray[i].range2End > 0)
    options = {
        height: 240,
        animation: { duration: 1000, easing: 'inAndOut' },
        //redFrom: 0, redTo: KRAvalues.targetVal,
        redFrom: 0, redTo: widgetArray[i].range1End,
        yellowFrom: widgetArray[i].range1End, yellowTo: widgetArray[i].range2End,
        greenFrom: widgetArray[i].range2End, greenTo: widgetArray[i].range3End,
        minorTicks: 5, max: widgetArray[i].dialMax,
        majorTicks: ['0', majorTickIncrement, majorTickIncrement * 2, majorTickIncrement * 3, majorTickIncrement * 4, widgetArray[i].dialMax]
    };
else
    options = {
        height: 240,
        animation: { duration: 1000, easing: 'inAndOut' },
        minorTicks: 5, max: widgetArray[i].dialMax,
        majorTicks: ['0', majorTickIncrement, majorTickIncrement * 2, majorTickIncrement * 3, majorTickIncrement * 4, widgetArray[i].dialMax]
    };

if (!widgetArray[i].googleChart) { // initialise gauge if required
    widgetArray[i].googleChart = new google.visualization.Gauge(document.getElementById(widgetArray[i].name + 'chart_div'));
}

// this animates the needle
// draw old value
widgetArray[i].googleChart.draw(widgetArray[i].googleArrayToDataTable, options);
// set new value
widgetArray[i].googleArrayToDataTable.setValue(0, 1, widgetArray[i].needleVal);
// draw new value
widgetArray[i].googleChart.draw(widgetArray[i].googleArrayToDataTable, options);