如何添加點上的可視化：區域圖

Question

如何添加點的谷歌圖表可視化內部：面積圖如上所示圖片中的紅點，我可以把一些標籤上方或跑題？

這裏是輸出上述

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

圖表可以使用ComboChart到一系列類型

在選項添加另一列中的數據表中爲點

結合的代碼，定義了系列類型，使用'scatter'代表點

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

看到下面的工作片段...

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>