Wie zeige ich in meinem Google-Diagramm Anmerkungen an, die Daten aus einer Google-Tabelle extrahieren?

Question

Ich habe ein Google-Diagramm, das einige Daten anzeigt.

Hier ist der HTML -

<div id="chart"></div> 

Hier ist die CSS -

html, 
body { 
    width: 100%; 
    height: 100%; 
} 

#chart { 
    width: 100%; 
} 

Hier ist die JS -

google.charts.load('current', { 
    'packages': ['corechart'] 
}); 

google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var query = new  google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:B"); 

    query.send(handleQueryResponse); 
} 

function handleQueryResponse(response) { 
    var data = response.getDataTable(); 

    var chartAreaHeight = data.getNumberOfRows() * 10; 

    var chartHeight = chartAreaHeight + 70; 

    var options = { 
     title: "Andaman & Nicobar Islands", 
     legend: "none", 
     vAxis: { 
      title: "Year", 
      format: "0", 
     }, 
     hAxis: { 
      title: "Rainfall (in mm)" 
     }, 
     height: chartHeight, 
     chartArea: { 
      height: chartAreaHeight, 
      top: "100", 
      right: "100", 
      bottom: "100", 
      left: "100" 
     } 
    }; 

    var chart = new  google.visualization.BarChart(document.getElementById("chart")); 

    chart.draw(data, options); 
}; 

window.onresize = function (event) { 
    chart.draw(data, options); 
}; 

Jetzt will ich Anmerkungen neben den Balken angezeigt werden Anzeige des Wertes dieses Balkens Wie mache ich das?

Hier ist die JSFiddle

Answer 1

Anmerkungen hinzufügen möchten, eine Spalte für den Anmerkungstext, direkt nach der Spalte mit den Werten hinzuzufügen. Im folgenden Beispiel wird eine DataView zum Hinzufügen einer berechneten Spalte für die Anmerkungen verwendet.

auch die resize-Funktion muss in den gleichen Umfang wie die chart enthalten sein.
in der Geige zur Verfügung gestellt, wird ein Fehler auftreten, wenn das Fenster in der Größe geändert wird,
wie die chart, data und options Variablen sind nicht verfügbar.

siehe folgende, Arbeitsbeispiel ...

google.charts.load('current', { 
 
    'packages': ['corechart'] 
 
}); 
 

 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:B"); 
 
    query.send(handleQueryResponse); 
 
} 
 

 
function handleQueryResponse(response) { 
 
    var data = response.getDataTable(); 
 
    var chartAreaHeight = data.getNumberOfRows() * 10; 
 
    var chartHeight = chartAreaHeight + 70; 
 
    var options = { 
 
    // add text style for annotation 
 
    annotations: { 
 
     textStyle: { 
 
     fontSize: 8 
 
     } 
 
    }, 
 
    title: "Andaman & Nicobar Islands", 
 
    legend: "none", 
 
    vAxis: { 
 
     title: "Year", 
 
     format: "0" 
 
    }, 
 
    hAxis: { 
 
     title: "Rainfall (in mm)" 
 
    }, 
 
    height: chartHeight, 
 
    chartArea: { 
 
     height: chartAreaHeight, 
 
     top: "100", 
 
     right: "100", 
 
     bottom: "100", 
 
     left: "100" 
 
    } 
 
    }; 
 

 
    // format data for annotation 
 
    var formatter = new google.visualization.NumberFormat({pattern: '#,##0.0'}); 
 
    formatter.format(data, 1); 
 

 
    // use view to add annotation column 
 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
    calc: "stringify", 
 
    sourceColumn: 1, 
 
    type: "string", 
 
    role: "annotation" 
 
    }]); 
 

 
    var chart = new google.visualization.BarChart(document.getElementById("chart")); 
 
    chart.draw(view, options); 
 

 
    window.addEventListener('resize', function() { 
 
    chart.draw(view, options); 
 
    }, false); 
 
}

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#chart { 
 
    width: 100%; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"></div>