谷歌饼图类型不匹配答案

【问题标题】：Google Pie Chart type mismatch谷歌饼图类型不匹配
【发布时间】：2016-01-15 20:55:13
【问题描述】：

我正在使用 Google Charts 创建饼图，但出现此错误：

未捕获的错误：类型不匹配。值 720 与列索引 1 中的类型日期不匹配

我的代码如下：

var graphData = [
    [
       'Occupation',
       {type: 'number'},
       {type: 'string', role: 'tooltip', 'p': {'html': true}}
    ],
    ['Training', 720, '<div class="pie-tooltip">Training<br/><strong>12 hours </strong></div>']
];

var data = google.visualization.arrayToDataTable(graphData);

var options = {
    is3D: true,
};

var chart = new google.visualization.PieChart(document.getElementById('field-occupation-graph'));
chart.draw(data, options);

Occupation 之后的 {type: string} 是我为了避免同样的错误而更改的。我在那里有值'Time'，并且错误，而不是说720 说Time。基本上相同的错误，但图表的标题。

我不知道这个date 类型的错误是从哪里来的，这个图表根本没有使用日期。

我在这里一无所知，所以非常感谢任何帮助。谢谢！

【问题讨论】：

标签： javascript charts google-visualization pie-chart

【解决方案1】：

您很亲密，有多种方法可以构建DataTable。

如果需要指定列类型，可以使用对象作为列属性。
否则，您可以使用字符串作为列标签。您也可以混合样式...

关键是每个人都有一些有效的东西。

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var graphData = [
        [
          {
            id: 'Column1',
            label: 'Occupation',
            type: 'string'
          },
          {
            id: 'Column2',
            label: 'Hours',
            type: 'number'
          },
          {
            id: 'Column3',
            type: 'string',
            role: 'tooltip',
            p: {'html': true}
          }
        ],
        ['Training', 720, '<div class="pie-tooltip">Training<br/><strong>12 hours </strong></div>']
    ];

    var graphData2 = [
        [
          'Occupation',
          'Hours',
          {
            type: 'string',
            role: 'tooltip',
            p: {'html': true}
          }
        ],
        ['Training', 720, '<div class="pie-tooltip">Training<br/><strong>12 hours </strong></div>']
    ];

    var data = google.visualization.arrayToDataTable(graphData);
    var data2 = google.visualization.arrayToDataTable(graphData2);

    var options = {
        is3D: true,
    };
    var options2 = {
        colors: ['red'],
        is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('field-occupation-graph'));
    chart.draw(data, options);

    var chart2 = new google.visualization.PieChart(document.getElementById('field-occupation-graph2'));
    chart2.draw(data2, options2);
}

<script src="https://www.google.com/jsapi"></script>
<div id="field-occupation-graph"></div>
<div id="field-occupation-graph2"></div>

【讨论】：