Google 图表 LineChart 错误...给定轴上的所有系列必须具有相同的数据类型

Question

我正在使用以下数据绘制折线图：

var data = google.visualization.arrayToDataTable([
   ['Name', 'Donuts eaten'],
   ['Michael' , 5],
   ['Elisa', 7],
   ['Robert', 3],
   ['John', 2],
   ['Jessica', 6],
   ['Aaron', 1],
   ['Margareth', 8]
 ]);
and it works fine. But the moment I try to add another text column to the data - for example:

var data = google.visualization.arrayToDataTable([
    ['Name', 'Donuts eaten', 'overweight'],
    ['Michael' , 5,'yes'],
    ['Elisa', 7,'no'],
    ['Robert', 3,'yes'],
    ['John', 2,'no'],
    ['Jessica', 6,'yes'],
    ['Aaron', 1,'no'],
    ['Margareth', 8,'yes']
  ]);

我收到以下错误："All series on a given axis must be of the same data type"。

我需要第三列以便为以后创建类别过滤器。

我该怎么做？

谢谢

Answer 1

您可以存储表格、列、行和单元格的任何类型的属性，而不会影响数据。

存储行属性的示例overweight:

 var data = google.visualization.arrayToDataTable([
   ['Name', 'Donuts eaten'],
   {c:['Michael'  , 5],p:{overweight:'yes'}},
   {c:['Elisa'    , 7],p:{overweight:'no'}},
   {c:['Robert'   , 3],p:{overweight:'yes'}},
   {c:['John'     , 2],p:{overweight:'no'}},
   {c:['Jessica'  , 6],p:{overweight:'yes'}},
   {c:['Aaron'    , 1],p:{overweight:'no'}},
   {c:['Margareth', 8],p:{overweight:'yes'}}
 ]);

过滤器的可能实现：

google.setOnLoadCallback(drawChart);

function drawChart() {
 var data = google.visualization.arrayToDataTable([
   ['Name', 'Donuts eaten'],
   {c:['Michael'  , 5],p:{overweight:'yes'}},
   {c:['Elisa'    , 7],p:{overweight:'no'}},
   {c:['Robert'   , 3],p:{overweight:'yes'}},
   {c:['John'     , 2],p:{overweight:'no'}},
   {c:['Jessica'  , 6],p:{overweight:'yes'}},
   {c:['Aaron'    , 1],p:{overweight:'no'}},
   {c:['Margareth', 8],p:{overweight:'yes'}}
 ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart'));

  window.filter = function(val) {
    var view = new google.visualization.DataView(data);

    if (val !== '0') {
      for (var r = view.getNumberOfRows() - 1; r >= 0; --r) {
        if (val !== view.getRowProperty(r, 'overweight')) {
          view.hideRows([r]);
        }
      }
    }
    chart.draw(view);
  }
  filter(document.getElementsByTagName('select')[0].value);

}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }"></script>
<select onchange="filter(this.value)">
  <option selected value="0">no filter</option>
  <option value="yes">overweight</option>
  <option value="no">no overweight</option>
</select>
<div id="chart"></div>

Google 图表 LineChart 错误...给定轴上的所有系列必须具有相同的数据类型

Google Charts LineChart error...All series on a given axis must be of the same data type

linechart

google-visualization