如何将自定义轴线添加到谷歌图表？

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>