Google 饼图类型不匹配

Question

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

Uncaught Error: Type mismatch. Value 720 does not match type date in column index 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。基本上是相同的错误，但带有图表的 headers。

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

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

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

Google 饼图类型不匹配

Google Pie Chart type mismatch

javascript

charts

google-visualization

pie-chart