如何將自定義軸線添加到谷歌圖表？

Question

我有一個谷歌散點圖，它有一些重要的閾值。我如何可視化他們？

我是否在圖表軸上添加了一些額外的刻度？如果是這樣，我該如何添加一個，我如何設計它？

我的目標是這樣的。

我使用React Google charts

Answer 1

添加另一列或系列，所有行相同的值...

這可以通過使用數據視圖與計算列添加，

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

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y0'], 
 
    [0, 165], 
 
    [1, 175], 
 
    [2, 185] 
 
    ]); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, 
 
    { 
 
     calc: function() { 
 
     return 150; 
 
     }, 
 
     label: 'min', 
 
     type: 'number' 
 
    }, 
 
    { 
 
     calc: function() { 
 
     return 175; 
 
     }, 
 
     label: 'avg', 
 
     type: 'number' 
 
    }, 
 
    { 
 
     calc: function() { 
 
     return 200; 
 
     }, 
 
     label: 'max', 
 
     type: 'number' 
 
    } 
 
    ]); 
 

 
    var options = { 
 
    vAxis: { 
 
     viewWindow: { 
 
     min: 125, 
 
     max: 225 
 
     } 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart')); 
 
    chart.draw(view, options); 
 
}

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

編輯

這裏是另一個例子......

添加更多的列到數據表，
使用getColumnRange爲找到min和max x軸值

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y0'], 
 
    [0, 165], 
 
    [1, 175], 
 
    [2, 185] 
 
    ]); 
 

 
    var xAxisRange = data.getColumnRange(0); 
 
    data.addColumn({label: 'min', type: 'number'}); 
 
    data.addColumn({label: 'avg', type: 'number'}); 
 
    data.addColumn({label: 'max', type: 'number'}); 
 
    data.addRows([ 
 
    [xAxisRange.min, null, 150, 175, 200], 
 
    [xAxisRange.max, null, 150, 175, 200] 
 
    ]); 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart')); 
 
    chart.draw(data, { 
 
    series: { 
 
     1: { 
 
     color: 'cyan' 
 
     }, 
 
     2: { 
 
     color: 'cyan' 
 
     }, 
 
     3: { 
 
     color: 'cyan' 
 
     } 
 
    } 
 
    }); 
 
}

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