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

Question

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

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

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;

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

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

这很奇怪，因为我在 header 列中添加了一个 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);

更新

列标题导致新错误。

此处，应使用object符号来定义类型。
而是在以下语句中传递字符串。

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

并且由于未使用 object 符号，
该方法不识别样式角色，
并尝试为系列数据使用字符串值，
这会导致错误。

使用数据 table 构造器没问题，
但是如果你想更正 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，因为我看到了一个样式为 header 的 DataTable。我 re-wrote 我的数据转换器功能是这样的：

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;

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

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 解决方案。

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

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

javascript

charts

google-visualization