Question

如何在google可视化图表的每个栏中顶部显示价值。我从数据库获取数据，并将其提取到数组以构建图表。这是我的代码。

图片>>：https://www.picz.in.th/image/1hCAfb

    var arr1 =[];
    var arr2 = []; `enter code here`
    var arrHead = ['Date', 'Deposit', 'Withdraw' , 'Bonus'];
    var obj = JSON.parse(data);
    arr1.push(arrHead); 


    for(var i = 0; i < obj.length; i++) {
        var objData = obj[i];
        arr2.push(objData.CreateDate == null ? "Empty" : objData.CreateDate);
        arr2.push(objData.DP == null ? 0 : parseInt(objData.DP, 10));
        arr2.push(objData.WD == null ? 0 : parseInt(objData.WD, 10) );
        arr2.push(objData.WD == null ? 0 : parseInt(objData.WD2, 10) );
        arr1.push(arr2);
        arr2 =[];   
    }

    var data = google.visualization.arrayToDataTable(arr1);

    var options = { 
        //title: "Transaction Graph",
        hAxis: {title: 'Transaction Date', titleTextStyle: {color: 'red'}},
        vAxis: {title: 'Amount', titleTextStyle: {color: 'blue'}  },
        width: 500,
        height: 500,
        bar: {groupWidth: 100},
        legend: { position: 'right', maxLines: 3 },
        tooltip: { trigger: 'select' }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);

//

Answer 1

需要在每个系列列之后添加annotation columns

对于您的列标题，请使用对象...

{role: 'annotation', type: 'string'}

然后为数据行中的列添加与字符串相同的值。

有关详细信息，请参见以下代码段

var arr1 =[];
var arr2 = []; `enter code here`
var arrHead = [
    'Date',
    'Deposit', {role: 'annotation', type: 'string'},  // <-- add annotation columns
    'Withdraw', {role: 'annotation', type: 'string'},
    'Bonus', {role: 'annotation', type: 'string'}
];
var obj = JSON.parse(data);
arr1.push(arrHead); 


for(var i = 0; i < obj.length; i++) {
    var objData = obj[i];
    arr2.push(objData.CreateDate == null ? "Empty" : objData.CreateDate);
    arr2.push(objData.DP == null ? 0 : parseInt(objData.DP, 10));
    arr2.push(objData.DP == null ? null : objData.DP.toString());      // <-- add annotation
    arr2.push(objData.WD == null ? 0 : parseInt(objData.WD, 10));
    arr2.push(objData.WD == null ? null : objData.WD.toString());      // <-- add annotation
    arr2.push(objData.WD2 == null ? 0 : parseInt(objData.WD2, 10));
    arr2.push(objData.WD2 == null ? null : objData.WD2.toString());    // <-- add annotation
    arr1.push(arr2);
    arr2 =[];   
}

var data = google.visualization.arrayToDataTable(arr1);

var options = { 
    //title: "Transaction Graph",
    hAxis: {title: 'Transaction Date', titleTextStyle: {color: 'red'}},
    vAxis: {title: 'Amount', titleTextStyle: {color: 'blue'}  },
    width: 500,
    height: 500,
    bar: {groupWidth: 100},
    legend: { position: 'right', maxLines: 3 },
    tooltip: { trigger: 'select' }
};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);

如何在Google可视化图表的每个栏中顶部显示价值

1 个答案: