Wie zeichne ich ein Streudiagramm mit Beschriftungen im Google-Diagramm?

Question

Schauen Sie sich dieses Google-Diagramm in spreadsheet an.

Wie man diese Namen auf Diagramm anstatt Tooltips zeichnet? Müssen Daten oder Optionen, die dem Google-Diagramm zugewiesen sind, geändert werden?

Sie können dies überprüfen plunker.

var chart2 = {}; 
chart2.type = "ScatterChart"; 
chart2.cssStyle = "height:400px; width:500px;"; 
chart2.data = [ 
     ['Age', 'Weight'], 
     [ {'v':8,'f':'Name 1'},  -12], 
     [ {'v':-4,'f':'Name 2'},  5.5], 
     [ {'v':11,'f':'Name 3'},  14], 
     [ {'v':-4,'f':'Name 4'},  -5], 
     [ {'v':3,'f':'Name 5'},  3.5], 
     [ {'v':6.5,'f':'Name 6'}, -7] 
    ]; 

chart2.options = { 
    "title": "Age Vs Maturity", 
    "isStacked": "true", 
    "fill": 20, 
    "hAxis": {"title": "Age", minValue: -15, maxValue: 15}, 
    "vAxis": {"title": "Maturity", minValue: -15, maxValue: 15}, 
    "legend": 'none' 
}; 

$scope.chart2 = chart2; 

Answer 1

können Sie eine Anmerkung Spalte verwenden, um Etiketten zu einem Punktdiagramm hinzufügen ...

siehe folgendes Beispiel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Age', 'Weight', {role: 'annotation'}], 
 
     [ 8,  12, 'Point 1'], 
 
     [ 1,  5.5, 'Point 2'], 
 
     [ 11,  14, 'Point 3'], 
 
     [ 4,  5, 'Point 4'], 
 
     [ 3,  3.5, 'Point 5'], 
 
     [ 6.5, 7, 'Point 6'] 
 
    ]); 
 

 
    var options = { 
 
     title: 'Age vs. Weight comparison', 
 
     hAxis: {title: 'Age', minValue: 0, maxValue: 15}, 
 
     vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, 
 
     legend: 'none' 
 
    }; 
 

 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages:['corechart'] 
 
});

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