Question

在尝试使用google可视化API可视化此散点图时，我遇到了一个非常奇怪的问题。

基本上，如果我把第一个数据点设为[0,0]，一切都会好的，但如果删除[0,0]作为第一个点，图表就不会产生。我检查了控制台，这就是它所说的：

“未捕获的SyntaxError：意外的令牌＆lt;
未捕获的错误：0,0“

中的值无效

为什么第一点确实必须是[0,0]？

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Camera','Avg Rating'],
          [ {v:6000, f: 'Canon EOS-1Ds Mark III'}, 60],
          [ {v:5000, f: 'Canon EOS-1Ds Mark II'}, 50],
          [ {v:4000, f: 'Canon EOS-1D Mark IV'}, 40]
        ]);

        var options = {
          title: 'Breakdown of Camera Models by Price, Photo Rating and Brand',
          hAxis: {title: 'Price (USD)', minValue: 0, maxValue: 7500},
          vAxis: {title: 'Avg Rating (at peak)', minValue: 0, maxValue: 55},
          legend: 'none'          
        };
        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 1000px; height: 1000px;"></div>
  </body>
</html>

Answer 1

这里的问题是{v：value，f：'format value'}语法无法与arrayToDataTable方法一起使用（如此处所述（https://developers.google.com/chart/interactive/docs/reference#google.visualization.arraytodatatable））。如果要使用该语法，则必须手动定义DataTable，然后使用#addRows方法

Answer 2

我不知道为什么会出现错误，但我找到了解决问题的方法。当我使用DataTable构造函数时它开始工作：

var data = new google.visualization.DataTable();
                data.addColumn('number', 'Price');
                data.addColumn('number', 'Canon');
                data.addColumn('number', 'Nikon');
                data.addColumn('number', 'Other');
                data.addRows([
                  [{v:6000, f: 'Canon EOS-1Ds Mark III'}, 60  ,null  ,null],
                  [{v:5000, f: 'Canon EOS-1Ds Mark II'}, 50  ,null  ,null],

而不是arraytoDataTable构造函数：

   var data = google.visualization.arrayToDataTable([
      ['Camera','Avg Rating'],
      [ {v:6000, f: 'Canon EOS-1Ds Mark III'}, 60],
      [ {v:5000, f: 'Canon EOS-1Ds Mark II'}, 50],
      [ {v:4000, f: 'Canon EOS-1D Mark IV'}, 40]
    ]);

希望能帮助任何遇到此问题的人。

未捕获的错误：0,0中的值无效

2 个答案: