Question

此Google动态新闻图基于Google的示例here。当我的代码没有设置任何选项时，即

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

图表显示应该显示。

但是，虽然我按照Google文档中的示例设置并从工作图下的“高级”标签中提取了我的选项，但当我尝试添加它们时（甚至在编辑之前）它不起作用。完整代码如下：

<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>

有什么想法吗？也许我忽略了一个基本的语法错误。谢谢！

Answer 1

您需要删除状态字符串末尾的额外;：

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

它应该是：

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

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

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

应该是：

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

基本的Google Motionchart无法使用。问题出在选项设置中

1 个答案: