GoogleCharts - 轴 #0 的数据列不能是字符串类型

Question

我正在使用 ExtJS 构建一个 Web 应用程序，并且我有一个 Google 图表，它显示完成一项任务所需的天数以及这些天的计数。目的是轻松查看任务是否在合理的时间内完成，或者很多任务是否在更长的时间内完成。

我可以毫无问题地获取数据，并将原始数据转换为 Google Charts 可以使用函数处理的数据：

var output_data= "";
var output_data_array = [];
var data_count = data.length;

google.charts.load('current', {'packages':['corechart', 'bar']});

var header = "[\"Days\", \"Count\", { role: \"style\" } ],";
output_data_array.push(["Days, type: 'string'", "Count, type: 'number'", "{role: \"style\"}"]);

for(var i = 0 ; i < data_count ; i++){

    var data_entry = data[i];

    var number_of_days = data_entry.days;
    var count = parseFloat(data_entry.count);
    var color;

    if(number_of_days < limit){
        color = 'green';
    }
    else{
        color = 'red';
    }

    output_data_array.push([number_of_days, count, color]);

}

var output_data_table = google.visualization.arrayToDataTable([
    output_data_array
], false);

return output_data_table;

上面的函数生成我的数据数组，其中包含实际数据之前的数据头。我在下面这个函数中调用这个函数：

var graph_data = this.convertData_forGoogleCharts(analytics_data_array, 15);

google.charts.load('current', {'packages':['corechart', 'bar']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var view = new google.visualization.DataView(graph_data);
    view.setColumns([0, 1,
                     { calc: "stringify",
                      sourceColumn: 1,
                      type: "string",
                      role: "annotation" },
                     2]);

    var options = {
        title: "Test Chart",
        width: width,
        height: height,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("myChartPanel"));
    chart.draw(view, options);
}

但是，在我运行这个之后，我得到了以下错误：

Data column(s) for axis #0 cannot be of type string

这很奇怪，因为我在列标题中添加了 type 字段。我也不确定我是否可以在我的arrayToDataTable 中使用addColumn，就像使用DataTable 一样。

Answer 1

我认为问题出在以下语句...

var output_data_table = google.visualization.arrayToDataTable([
    output_data_array
], false);

output_data_array 已经定义为一个数组，
所以不需要包装在另一个数组中。

尝试如下...

var output_data_table = google.visualization.arrayToDataTable(output_data_array, false);

更新

新的错误是由列标题引起的。

这里应该使用对象表示法来定义类型。
而是在以下语句中传递字符串。

output_data_array.push(["Days, type: 'string'", "Count, type: 'number'", "{role: \"style\"}"]);

并且由于不使用对象表示法，
该方法无法识别样式角色，
并尝试对系列数据使用字符串值，
这会导致错误。

使用数据表构造器就可以了，
但如果你想更正arrayToDataTable，
改成下面...

output_data_array.push(["Days", "Count", {role: "style", type: "string"}]);

或者...

output_data_array.push([
  {label: "Days", type: "string"},
  {label: "Count", type: "number"},
  {role: "style", type: "string"}
]);

Answer 2

我按照上面 WhiteHat 的回答，但我得到了一个新的错误：

All series on a given axis must be of the same data type.

不确定我的数据是否有任何问题，我记录了我的数组，结果：

数据在我看来是统一的。我不知道该怎么做，所以我尝试了一个 DataTable，因为我看到了一个带有样式标题的 DataTable。我重写了我的数据转换器函数：

var data_table = new google.visualization.DataTable();
data_table.addColumn({type: 'string', label: 'Number of Days'});
data_table.addColumn({type: 'number', label: 'Count'});
data_table.addColumn({type: 'string', role: 'style'});


for(var i = 0 ; i < data_count ; i++){

    var data_entry = data[i];

    var number_of_days = data_entry.days;
    var count = parseFloat(data_entry.count);
    var color;

    if(number_of_days < tat_limit){
        color = 'green';
    }
    else{
        color = 'red';
    }

    data_table.addRow([number_of_days, count, color]);

}

output_data = header + output_data;

return data_table; 

然后在 main 函数中，它被用作：

function drawChart() {

    var graph_data = this.convertData_forGoogleCharts(analytics_data_array, 15);

    var view = new google.visualization.DataView(graph_data);
    view.setColumns([0, 1,
                     { calc: "stringify",
                      sourceColumn: 1,
                      type: "string",
                      role: "annotation" },
                     2]);

    var options = {
        title: "Test Chart",
        width: width,
        height: height,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
    };

    var chart = new google.visualization.ColumnChart(document.getElementById("myChartPanel"));
    chart.draw(view, options);
}

这个工作就像一个魅力，但我仍然愿意重新访问arrayToDataTable 解决方案。