Google Chart的柱形图不以中心为准

时间:2013-07-29 05:12:18

标签: jquery asp.net-mvc-3 asp.net-mvc-4 google-visualization

查看代码

$.getJSON('Transacciones/getData',{}, function (data) {
    dataModulo3 = data;
    dibujarColumnChart( transformarData(data) , "divModulo3");
});

控制器,我从这个

获取数据
public ActionResult getData(){
    List<String[]> aux = new List<String[]>();
    aux.Add(new String[] { "string", "number", "number", "number", "number",   "number", "number" });//tipo cabeceras
    aux.Add(new String[] { "Year", "Austria", "Belgium", "Czech Republic", "Finland", "France", "Germany" });//nombre cabeceras
    aux.Add(new String[] { "2003", "1336060", "3817614", "974066", "21104797", "6651824", "15727003"});
    return Json(aux, JsonRequestBehavior.AllowGet);
}

transformarData js function bellow

function transformarData(data) {
    var rows = data.length;
    var cols = data[0].length;
    var tdata = new google.visualization.DataTable();
    for (var i = 0; i < cols; i++) {
        tdata.addColumn(data[0][i], data[1][i]);
    }
    tdata.addRows(data.length);
    for (var i = 2; i < data.length; i++) {    
        for (var j = 0; j < cols; j++) {
            var value = data[i][j];
            if (data[0][j] == 'number') {
                value = parseInt(data[i][j]);
            }
        tdata.setCell(i, j, value);
        }
    }
    return tdata;
}

dibujarColumnChart function js bellow

function dibujarColumnChart(datos, idDiv) {
    var data = datos;
    var columnchart = new google.visualization.ColumnChart(document.getElementById(idDiv));
    columnchart.draw(data, {
        backgroundColor: "transparent"
    });
}

Not center column chart

但是如果不使用来自控制器的数据,我会使用javascript数据:

$.getJSON('Transacciones/getData',dataJson , function (data) {
    dataModulo3 = data;
    var datajs = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
    ['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003]
    ]);
    dibujarColumnChart( datajs , "divModulo3");
});

我将柱形图集中在一起:

column chart centered

我想知道我是否可以将这个柱形图集中在从json调用中获取数据。

1 个答案:

答案 0 :(得分:0)

您使用了tdata.setCell(i,j,value)而不是tdata.setCell(i - 2,j,value),因此您没有为第一个fow赋值。相反,谷歌创建了一行,这就是它向右移动的原因。此外,您应该添加1行而不是3行。

请参阅下面的代码:

function transformarData(data) {
    var rows = data.length-2;
    var cols = data[0].length;
    var tdata = new google.visualization.DataTable();
    log("creado tdata");
    //tdata.addColumn(data[, data[0][0]);
    for (var i = 0; i < cols; i++) {
        tdata.addColumn(data[0][i], data[1][i]);
    }
    tdata.addRows(rows);
    for (var i = 2; i < data.length; i++) {
        for (var j = 0; j < cols; j++) {
            var value = data[i][j];
            if (data[0][j] == 'number') {
                value = parseInt(data[i][j]);
            }
            tdata.setCell(i-2, j, value);
        }
    }
    return tdata;
}

PD:对于其他帖子,请尝试用英语命名您的变量,以便更好地了解每个想要回答您问题的人。