Wie Punkt auf Visualisierung hinzufügen: Die Umgebung Tabelle

Question

Wie man einen Punkt innerhalb der Google Charts Visualisierung hinzuzufügen: Flächendiagramm wie der roten Punkt auf dem Bild oben gezeigt und kann ich setzte einig Etikett über oder neben dem Punkt ?

Hier ist der Code, der das Diagramm oben

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

    function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Output1'); 
    data.addColumn('number', 'Height'); 
    data.addColumn({type:'string', role:'annotation'}); 
    data.addRows([ 
     <?php echo"['', 2, null],"; ?> 
     <?php echo"['', 2, '1 Kpa ---------->'],"; ?> 
     <?php echo"['2', 1, '<---------- 2'],"; ?> 
     <?php echo"['3 σ', 0, '<---------- 3 σ']"; ?> 
    ]); 

    var options = { 
     title: 'Total Stress', 
     hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}}, 
     vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length^1 m'},{v:0, f:'1 m'}] } 
    }; 

    var chart = new google.visualization.AreaChart(document.getElementById('total_stress')); 
    chart.draw(data, options); 
    } 

Answer 1

Sie eine ComboChart Reihentypen verwenden können, gibt

fügen Sie eine weitere Spalte der Datentabelle für den Punkt

in den Optionen zu kombinieren , definieren Sie die Serientypen, verwenden Sie 'scatter' für Punkte

seriesType: 'area', 
series: { 
    1: { 
    type: 'scatter' 
    } 
} 

siehe folgende Arbeits Schnipsel ...

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Output1'); 
 
    data.addColumn('number', 'Height'); 
 
    data.addColumn({type:'string', role:'annotation'}); 
 
    data.addColumn('number', 'Scatter'); 
 
    data.addRows([ 
 
    ['', 2, null, null], 
 
    ['', 2, '1 Kpa ---------->', 1], 
 
    ['2', 1, '<---------- 2', null], 
 
    ['3 s', 0, '<---------- 3 s', null] 
 
    ]); 
 

 
    var options = { 
 
    title: 'Total Stress', 
 
    hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}}, 
 
    vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length^1 m'},{v:0, f:'1 m'}] }, 
 
    seriesType: 'area', 
 
    series: { 
 
     1: { 
 
     type: 'scatter' 
 
     } 
 
    } 
 
    }; 
 

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

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