渲染谷歌折线图，curveType不设置，动画无法按预期工作 [英] Rendering a google line chart, curveType not setting and animation not working as expected

问题描述

我正在绘制谷歌折线图，效果很好。该图表绘制了正确的数据。但是，当我去改变curveType的选项时，'功能'选项不会将图表从直线更改为曲线。另外，动画功能根本不做任何事情。我在这里错过了什么吗？这是我的代码：

  google.charts.load（'current'，{$ b $'packages'：[''行'] 
}）; 
 google.charts.setOnLoadCallback（drawChart）; 
 
函数drawChart（）{
 var data = google.visualization.arrayToDataTable（[
 ['Year'，'Number'] 
，['2005'， ['2006'，65425] 
，['2007'，71389] 
，['2008'，75173] 
，['2009'，75554] 
，['2010'，75174] 
，['2011'，74033] 
，['2012'，72225] 
，['2013'，68954] 
，['2014'，67462] 
，]）
}; 
 var options = {
 animation：{
 duration：1000，
 easing：'out'，
}，curveType：'function'
，smoothline ：'true'
，width：875 
，height：400 
，legend：{position：'none'} 
}; 
 var chart = new google.charts.Line（document.getElementById（'number_chart'））; 
 chart.draw（data，options）; 
 
  

解决方案

在你上面的代码中，我不确定它们是否是由于大块代码的剪切和粘贴而引起的？

然而，除此之外，根本原因这些功能不起作用是因为您正在加载的'行'包以及 google.charts.Line（...）对象正在创建Google所称的材质表。这是完全重新设计的Google Visualization API实现，它遵循Google的Material Design规范，目前仍处于测试阶段（详情请参阅 here ）。他们称之为经典图表库的许多功能尚未结转到Material Design图表（请参见这个Github问题）和注意 animation。* 和 curveType

无论如何，您可以通过使用旧的（但更好支持的）Google VisualizationClassic核心图包来解决您的问题，如下所示：

/ *加载ClassicGoogle Visualization API corechart package * / google。 charts.load（'current'，{'packages'：['corechart']}）; google.charts.setOnLoadCallback（drawChart）;函数drawChart（）{var data = google.visualization.arrayToDataTable（[['Year'，'Number']，['2005'，61372]，['2006'，65425]，['2007'，71389] ''2008'，75173]，['2009'，75554]，['2010'，75174]，['2011'，74033]，['2012'，72225]，['2013'，68954]，['2014 '，67462]，]）; var options = {animation：{startup：true，/ *需要为动画添加* / duration：1000，easing：'out'，}，curveType：'function'，// smoothline：'true'，/ *这是否？ * / // width：875，/ *更好地指定包含DIV的大小？ * / // height：400，legend：{position：'none'}，vAxis：{/ *您可能希望添加这个以使曲线动画显示在图表底部* / baseline：60000，}}; / *创建经典可视化折线图实例* / var chart = new google.visualization.LineChart（document.getElementById（'curve_chart'））; chart.draw（数据，选项）; }

 < script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script>< div id =curve_chart>< / div>   
 
 > 
 
 
编辑添加：出于某种原因，图表不喜欢在嵌入式Run Code Snippet中运行（我使用的是Win 7上最新的Chrome），但该代码应该在其他地方正常工作。
 
I'm drawing a google line chart and it works fine. The chart draws with the correct data. However when I go change the options of curveType, the 'function' option does not change the chart from straight line to curves. Also, the animation functions do nothing at all. Am I missing something here? This is my code:
google.charts.load('current', {
     'packages': ['line']
 });
 google.charts.setOnLoadCallback(drawChart);

     function drawChart() {
  var data = google.visualization.arrayToDataTable([
      ['Year', 'Number']
      , ['2005',    61372]
      , ['2006',    65425]
      , ['2007',    71389]
         , ['2008', 75173]
         , ['2009', 75554]
         , ['2010', 75174]
         , ['2011', 74033]
         , ['2012', 72225]
         , ['2013', 68954]
         , ['2014', 67462]
     , ])
 }; 
 var options = { 
    animation:{
    duration: 1000,
    easing: 'out',
  },  curveType: 'function'
     , smoothline: 'true'
     , width: 875
     , height: 400
     , legend: {position: 'none'}
 };
 var chart = new google.charts.Line(document.getElementById('number_chart'));
 chart.draw(data, options);
 }

解决方案
You have a couple of errors in your code above, I'm not sure if they are due to cutting-and-pasting from a larger block code?

However, aside from that, the fundamental reason that these features are not working is because the 'line' package that you are loading and the google.charts.Line(...) object that you are using are creating what Google calls a Material Chart. This is a completely redesigned implementation of the Google Visualization API adhering to Google's "Material Design" specification and is still currently in beta (see details here). A lot of the features found in what they call the "Classic" chart library have not yet been carried over to the "Material Design" charts (see this Github issue) and note animation.* and curveType are both currently unsupported.

Anyway, you can solve your issues by using the older (but much better supported) Google Visualization "Classic" corechart package as follows:



/* Load "Classic" Google Visualization API corechart package */
    google.charts.load('current', {
      'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Number'],
        ['2005', 61372],
        ['2006', 65425],
        ['2007', 71389],
        ['2008', 75173],
        ['2009', 75554],
        ['2010', 75174],
        ['2011', 74033],
        ['2012', 72225],
        ['2013', 68954],
        ['2014', 67462],
      ]);

      var options = {
        animation: {
          startup: true,   /* Need to add this for animations */
          duration: 1000,
          easing: 'out',
        },
        curveType: 'function',
        //smoothline: 'true',   /* What does this do? */
        //width: 875,    /* Better to specify size of containing DIV? */
        //height: 400,
        legend: {
          position: 'none'
        },
        vAxis:{    /* You may wish to add this to make curve animations appear from the bottom of the chart */
          baseline: 60000,
        }
      };

/* Create instance of "Classic" Visualization Line Chart  */
      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
      chart.draw(data, options);
    }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>





Hope that helps!

Adam

Edited to add: For some reason the charts don't like running for me in the embedded "Run Code Snippet" thing (I'm using the latest Chrome on Win 7) but the code should work fine elsewhere.

                        
这篇关于渲染谷歌折线图，curveType不设置，动画无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！