我正在尝试显示具有某些值的Google折线图。我的最小值是0，最大值是100。我的图形有2条线，而不仅仅是一条线。
我对图形选项使用curveType：'function'，由于某种原因，在图表中-最小值设置为-100，最大值设置为+200。请运行脚本，然后查看图表左侧的数字-这些是我要询问的值，希望对其进行控制。
我究竟做错了什么？
这是我的代码：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="LineChart"></div>
</body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn('number', 'Value2');
data.addRows([
['5/21/2019',50,50],
['5/21/2019',100,0],
['5/21/2019',89,11],
['5/21/2019',90,10],
['5/21/2019',90,10],
['5/22/2019',90,10],
['5/22/2019',76,24],
['5/23/2019',76,24],
['5/23/2019',76,24]
]);
var Lineoptions = {
title: 'Overall success',
lineWidth: 4,
colors: ['#c9e3f4','#ea4c4c'],
curveType: 'function',
legend:{position:'none'},
fontSize:23,
hAxis : {
textStyle : {
fontSize: 16
}
},
vAxis : {
textStyle : {
fontSize: 16
},
minValue:0,
maxValue:100
},
annotations: {
textStyle: {
fontSize: 25,
bold: true,
italic: false,
color: '#000000',
opacity: 1
},
alwaysOutside: true
}
};
var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
Linechart.draw(data, Lineoptions);
google.visualization.events.addListener(chart7, 'ready', afterDraw);
}
</script>
</html>
最佳答案
不知道为什么minValue和maxValue不起作用。
但是，您可以改用viewWindow ...
viewWindow: {
min:0,
max:100
}
请参阅以下工作片段...
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn('number', 'Value2');
data.addRows([
['5/21/2019',50,50],
['5/21/2019',100,0],
['5/21/2019',89,11],
['5/21/2019',90,10],
['5/21/2019',90,10],
['5/22/2019',90,10],
['5/22/2019',76,24],
['5/23/2019',76,24],
['5/23/2019',76,24]
]);
var Lineoptions = {
title: 'Overall success',
lineWidth: 4,
colors: ['#c9e3f4','#ea4c4c'],
curveType: 'function',
legend:{position:'none'},
fontSize:23,
hAxis : {
textStyle : {
fontSize: 16
}
},
vAxis : {
textStyle : {
fontSize: 16
},
viewWindow: {
min:0,
max:100
}
},
annotations: {
textStyle: {
fontSize: 25,
bold: true,
italic: false,
color: '#000000',
opacity: 1
},
alwaysOutside: true
}
};
var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
Linechart.draw(data, Lineoptions);
}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="LineChart"></div>关于javascript - 具有curveType的Google折线图:函数更改vAxis值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56269768/