어떻게 시각화에 포인트를 추가하는 방법 : 위의 그림에서 빨간 점 같은 지역 차트를 그리고 난 위 또는 지점 옆에 약간의 라벨을 넣을 수 있습니다 : 영역 차트 구글 차트 시각화 내부에 점을 추가하는 방법

Question

? 여기

당신이 옵션에서 포인트에 대한 데이터 테이블에

을 다른 열을 추가

시리즈 유형을 결합하는 ComboChart을 사용할 수 있습니다

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

위의 차트를 출력하는 코드입니다 , 시리즈 유형을 정의하고, 점에 을 사용하십시오.

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>