1
Google 차트로 차트를 만듭니다. 차트 외부의 라인이 왜 그 자체입니까? 여기를 참조하십시오. 문제가있는 JS 피들 : https://jsfiddle.net/n75fuh6w/Google 차트 외 라인 차트
해결할 수 있습니까, 아니면 Google 차트의 작동 원리입니까? 많은 많은 감사합니다.
No code is needed here Stackoverflow
Google 차트로 차트를 만듭니다. 차트 외부의 라인이 왜 그 자체입니까? 여기를 참조하십시오. 문제가있는 JS 피들 : https://jsfiddle.net/n75fuh6w/Google 차트 외 라인 차트
해결할 수 있습니까, 아니면 Google 차트의 작동 원리입니까? 많은 많은 감사합니다.
No code is needed here Stackoverflow
차트 외부 라인은 vAxis
결과가 첫번째 시리즈의 범위에 고정되는 경우에만
이상의 데이터 시리즈 필요 행이있을 때
우리가 Math.min
를 사용할 수있는 모든 시리즈를 min
찾아 의 max
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);
}
}
}
에 대한 찾을 수 있습니다 안전
이 작업 조각을 다음을 참조
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>
다시 한번 감사드립니다 ... 오늘 많이 도와주세요. –
건배! 언제든지 ... – WhiteHat