基本的谷歌动态图表不工作.问题出在选项设置上

这个谷歌动态图，基于谷歌的例子。当我的代码没有设置任何选项时，即

var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
chart.draw(data, {width: 800, height:400});

图表显示正常

然而，尽管我遵循了谷歌文档中的示例设置，并从工作图下的"高级"选项卡中取出了我的选项，但当我试图添加它们时(甚至在编辑之前)它不起作用。完整代码如下:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {'packages':['motionchart']});
  google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Fruit');
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sales');
    data.addRows([
      ['STAR',  new Date (2012,0,1), 1000,],
      ['STAR', new Date (2012,0,1), 1150,],
      ['STAR', new Date (2013,0,1), 1200,],
      ['STAR',  new Date (2013,6,1), 1220,],
      ['STAR', new Date (2014,6,1), 1300,],
      ['STAR', new Date (2014,6,1), 1370,],
      ['SPTR Index',  new Date (2012,0,1), 1000,],
      ['SPTR Index', new Date (2012,0,1), 1050,],
      ['SPTR Index', new Date (2013,0,1), 1110,],
      ['SPTR Index',  new Date (2013,6,1), 1150,],
      ['SPTR Index', new Date (2014,6,1), 1250,],
      ['SPTR Index', new Date (2014,6,1), 1350,]
    ]);
var chart = new   google.visualization.MotionChart(document.getElementById('chart_div'));
 var options = {};
 options['state'] =
 '{"xZoomedDataMax":1370,"yLambda":1,"iconType":"BUBBLE","dimensions":{"iconDimensions":["dim0"]},"duration":{"timeUnit":"D","multiplier":1},"time":"2012","orderedByX":false,"yAxisOption":"2","playDuration":15000,"uniColorForNonSelected":false,"showTrails":true,"xAxisOption":"2","yZoomedIn":false,"yZoomedDataMax":1370,"xZoomedDataMin":1000,"colorOption":"_UNIQUE_COLOR","yZoomedDataMin":1000,"iconKeySettings":[{"key":{"dim0":"STAR"},"trailStart":"2012"},{"key":{"dim0":"SPTR Index"},"trailStart":"2012"}],"sizeOption":"_UNISIZE","orderedByY":false,"xLambda":1,"nonSelectedAlpha":0.4,"xZoomedIn":false};';
options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);
  }
</script>
</head>
<body>
<div id="chart_div" style="width: 600px; height: 400px;"></div>
</body>
</html>

任何想法?也许我忽略了一个基本的语法错误。谢谢!

在状态字符串的末尾有一个额外的;需要删除:

options['state'] = '{..."xZoomedIn":false};';

应该是:

options['state'] = '{..."xZoomedIn":false}';

此外，在添加到DataTable的每个行数组的末尾都有错误的逗号。大多数浏览器会简单地忽略它们，但IE会抛出一个错误;你应该删除它们:

['STAR',  new Date (2012,0,1), 1000,]

应:

['STAR',  new Date (2012,0,1), 1000]

相关内容

最新更新

热门标签：