Как отобразить значение в верхней части каждого столбца в диаграмме визуализации Google - PullRequest
Новая
       26

Как отобразить значение в верхней части каждого столбца в диаграмме визуализации Google

1 голос
/ 08 июня 2019

Как отобразить значение в верхней части каждого столбца в диаграмме визуализации 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);

//

1 Ответ

0 голосов
/ 08 июня 2019

необходимо добавить столбцы аннотаций после каждого столбца серии

для заголовка вашего столбца используйте объект ... 

{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);
...