Google Chart海外线图

Question

我用Google Chart制作海图。为什么我的线条在图表之外？ 在这里看到一个JS小提琴的问题：https://jsfiddle.net/n75fuh6w/

我可以解决这个问题，或者这只是谷歌图表如何工作？非常感谢。

No code is needed here Stackoverflow 

Answer 1

图表外线是vAxis的结果被锁定到所述第一系列的范围仅

当存在多于一个系列数据的，需要到找到min和max全系列

我们可以使用Math.min & max查找每个

// use null instead of zero (min could be greater than zero and wouldn't be found) 
var rangeMin = null; 
var rangeMax = null; 

// start with column 1 (exclude x axis) 
for (var i = 1; i < data.getNumberOfColumns(); i++) { 
    if (data.getColumnType(i) === 'number') { 
    var range = data.getColumnRange(i); 
    if (rangeMin === null) { 
     rangeMin = range.min; 
    } else { 
     rangeMin = Math.min(rangeMin, range.min); 
    } 
    if (rangeMax === null) { 
     rangeMax = range.max; 
    } else { 
     rangeMax = Math.max(rangeMax, range.max); 
    } 
    } 
} 

然后在选项，+/- 1安全

viewWindow: { 
    min: rangeMin - 1, 
    max: rangeMax + 1 
    } 

---

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

Date.prototype.minDays = function(days) { 
 
    var dat = new Date(this.valueOf()); 
 
    dat.setDate(dat.getDate() - days); 
 
    return dat; 
 
} 
 
var date = new Date(); 
 

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

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('datetime', 'Date'); 
 
    data.addColumn('number', 'Test1'); 
 
    data.addColumn('number', 'Test2'); 
 
    data.addColumn('number', 'Test3'); 
 
    data.addColumn('number', 'Test4'); 
 
    data.addColumn('number', 'Test5'); 
 
    data.addColumn('number', 'Test6'); 
 
    data.addColumn('number', 'Test7'); 
 
    data.addColumn('number', 'Test8'); 
 
    data.addColumn('number', 'Test9'); 
 
    data.addColumn('number', 'Test10'); 
 
    data.addColumn('number', 'Test11'); 
 
    data.addColumn('number', 'Test12'); 
 
    data.addRows([ 
 
    [new Date(2017, 1, 08), 1, 8, 1, 36, 7, 9, 12, 45, 20, 30, 45, 8], 
 
    [new Date(2017, 1, 07), 12, 9, 5, 8, 10, 21, 34, 87, 89, 45, 12, 9], 
 
    ]); 
 

 
    // set range 
 
    var rangeMin = null; 
 
    var rangeMax = null; 
 
    for (var i = 1; i < data.getNumberOfColumns(); i++) { 
 
    if (data.getColumnType(i) === 'number') { 
 
     var range = data.getColumnRange(i); 
 
     if (rangeMin === null) { 
 
     rangeMin = range.min; 
 
     } else { 
 
     rangeMin = Math.min(rangeMin, range.min); 
 
     } 
 
     if (rangeMax === null) { 
 
     rangeMax = range.max; 
 
     } else { 
 
     rangeMax = Math.max(rangeMax, range.max); 
 
     } 
 
    } 
 
    } 
 

 
    var options = { 
 
    chartArea: {'width': '100%'}, 
 
    animation: { 
 
     duration: 1000, 
 
     easing: 'in' 
 
    }, 
 
    hAxis: { 
 
     gridlines: { 
 
     color: '#cfd1d8', 
 
     }, 
 
     titleTextStyle: { 
 
     color: '#3e4763', 
 
     }, 
 
     viewWindowMode: 'explicit', 
 
     viewWindow: { 
 
     min: new Date(date.minDays(7)), 
 
     max: new Date(Date.now()), 
 
     }, 
 
    }, 
 
    vAxis: { 
 
     gridlines: { 
 
     count: 10, 
 
     }, 
 
     viewWindow: { 
 
     min: rangeMin - 1, 
 
     max: rangeMax + 1 
 
     } 
 
    }, 
 
    explorer: { 
 
     axis: 'horizontal', 
 
     keepInBounds: false, 
 
     maxZoomIn: 4.0 
 
    }, 
 
    lineWidth: 3, 
 
    pointSize: 8, 
 
    series: { 
 
     0: { color: '#003eff' }, 
 
     1: { color: '#118d26' }, 
 
     2: { color: '#ff00de' }, 
 
     3: { color: '#ff4fc3' }, 
 
     4: { color: '#ff0000' }, 
 
     5: { color: '#00c9cb' }, 
 
     6: { color: '#e5a200' }, 
 
     7: { color: '#00d975' }, 
 
     8: { color: '#a55f3d' }, 
 
     9: { color: '#783dc8' }, 
 
     10: { color: '#829100' }, 
 
     11: { color: '#945401' }, 
 
     }, 
 
    backgroundColor: '#f7f9f9', 
 
    legend: { position: 'none' }, 
 
    }; 
 
    var chart = new google.visualization.LineChart(document.getElementById('chart')); 
 
    chart.draw(data, options); 
 
}

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