0

查看代码 

$.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 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 函数 js 波纹管

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

非居中柱形图

但是，如果我不使用来自控制器的数据，而是使用 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");
});

我得到居中的柱形图：

柱状图居中

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

4

1 回答 1

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：对于其他帖子，请尝试用英文命名您的变量，以便更好地理解想要回答您问题的每个人。

于 2013-07-29T05:38:58.643 回答