为什么此代码在渲染两个不同的谷歌图表时抛出语法错误

时间:2014-08-12 14:24:09

标签: javascript google-visualization

任何人都可以帮我弄清楚为什么我在调用时会出现语法错误

        <div id='chart_div_org'></div>  

在html部分。我可以提前渲染第一张图表但是当我将另一张谷歌图表添加到脚本时出现了这个错误。我想我可能会犯一些错误  将两者结合起来。有人可以告诉我错误。

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script type="text/javascript">
         // Load the Visualization API and the orgchart package.
  google.load("visualization", "1.0", {packages:["corechart",'orgchart']});
   // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
      // instantiates the org chart, passes in the data and
      // draws it.

  function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
      ['PROGRAM', 'SUCCESSFUL STEPS',{ role: 'annotation' } ,'ERRORS',{ role:   
      'annotation' },'WARNINGS', { role: 'annotation' } ],
      ['Curian',  10, 'Completed ', 1,'Errors', 4, 'Warnings'],
      ['Pershing',  11, 'Completed ', 2, 'Errors',   4, 'Warnings'],
      ['DBTCA',  6, 'Completed'  , 3, 'Errors',  1, 'Warnings'],
      ['DBTCA',  1, 'Completed',  4, 'Errors',  5,  'Warnings']
    ]);

    var options1 = {
      title: 'CHECKLIST STEPS EXECUTION PROGRESS',
      hAxis: {title: 'PROGRAM', titleTextStyle: {color: 'red'}}
    };

    var chart1 = new 
    google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart1.draw(data1, options1);


    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'Name');
    data2.addColumn('string', 'Location');

    data2.addRows([

      [{v:'FTP LOG', f:'FTP LOG'<div style="color:red; font-style:italic">FTP 
      LOG</div>'}, '', 'The type of log'],
      ['\\inf-ftp01-pri\Log\', 'FTP LOG', ''],
      ['\\inf-ftp02-pri\Log\', 'FTP LOG', ''],

    ]);
    var chart2 = new 
         google.visualization.OrgChart(document.getElementById('chart_div_org'));
    chart2.draw(data2, {allowHtml:true});
  }
</script>

1 个答案:

答案 0 :(得分:0)

我发现了无效的JSON:

data2.addRows([
    [{v:'FTP LOG', f:'FTP LOG'<div style="color:red; font-style:italic">FTP LOG</div>'}, '', 'The type of log'],
                             ^--closing quote---------------one more closing quote --^

更多无效的JSON:

    ['\\inf-ftp02-pri\Log\', 'FTP LOG', ''], <----- remove this comma..
]

需要转义反斜杠,请尝试以下操作:

['\\\\inf-ftp01-pri\\Log\\', 'FTP LOG', ''],

还要更正代码

由@ user3630022给出 - 你在json中有3列,但只有2列addColum