这是我用于显示区间图表的代码，但是区间图表无法正确显示，区间图表显示一个水坑
这是截图 puddle before starting interval
在图表显示区间之前，总会有一个水坑。尽管如此，我已经为 GDP、GDPlower 和 GDPupper 设置了相同的值
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Tahun-Kuartal');
data.addColumn('number', 'TOTAL GDP');
data.addColumn({id:'i0', type:'number', role:'interval'});
data.addColumn({id:'i1', type:'number', role:'interval'});
data.addColumn('number', 'YoY');
data.addRows([
['2011-I', 1748731, 1748731, 1748731, 6.48],
['2011-II', 1816268, 1816268, 1816268, 6.27],
['2011-III', 1881850, 1881850, 1881850, 6.01],
['2011-IV', 1840786, 1840786, 1840786, 5.94],
['2012-I', 1855580, 1855580, 1855580, 6.11],
['2012-II', 1929019, 1929019, 1929019, 6.21],
['2012-III', 1993632, 1993632, 1993632, 5.94],
['2012-IV', 1948852, 1948852, 1948852, 5.87],
['2013-I', 1958396, 1958396, 1958396, 5.54],
['2013-II', 2036817, 2036817, 2036817, 5.59],
['2013-III', 2103598, 2103598, 2103598, 5.52],
['2013-IV', 2057688, 2057688, 2057688, 5.58],
['2014-I', 2058585, 2058585, 2058585, 5.12],
['2014-II', 2137386, 2137386, 2137386, 4.94],
['2014-III', 2207344, 2207344, 2207344, 4.93],
['2014-IV', 2161553, 2161553, 2161553, 5.05],
['2015-I', 2157848, 2157848, 2157848, 4.82],
['2015-II', 2238762, 2238762, 2238762, 4.74],
['2015-III', 2312640, 2312640, 2312640, 4.77],
['2015-IV', 2273262, 2273262, 2273262, 5.17],
['2016-I', 2264090, 2264090, 2264090, 4.92],
['2016-II', 2354798, 2354798, 2354798, 5.18],
['2017-II', 2500000, 1500000, 5000000, 6.17],
]);
// The intervals data as narrow lines (useful for showing raw source data)
var options_lines = {
'title':'TOTAL GDP INDONESIA',
'width':'1360','height':'350',
curveType: 'function',
lineWidth: 3,
intervals: { 'style':'area' },
vAxes: {
0: {format: '###,###', viewWindow: { min: 0 }, gridlines: {count: 6, color: 'none'}, textStyle: {color:'black', bold: 'true'} },
1: {format: '', viewWindow: { min: 0, max: 10 }, gridlines: {count: 6, color: 'none'}, textStyle: {color:'blue', bold: 'true'} }
},
hAxis: {textStyle: {color:'black', bold:'true'} },
series: { 0:{ lineWidth: '1', type: "area", targetAxisIndex: 0, color: 'green' },
1:{ lineWidth: '3', type: "line", targetAxisIndex: 1}
},
legend: {
textStyle: {color:'purple', bold:'true'},
position: ''
}
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart'));
chart_lines.draw(data, options_lines);
}
最佳答案
水坑是由于 --> curveType: 'function'
仅将选项移至系列 1...
series: {
0:{
lineWidth: 1,
type: 'area',
targetAxisIndex: 0,
color: 'green'
},
1:{
lineWidth: 3,
type: "line",
targetAxisIndex: 1,
curveType: 'function' // <-- move here
}
},
请参阅以下工作片段...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Tahun-Kuartal');
data.addColumn('number', 'TOTAL GDP');
data.addColumn({id:'i0', type:'number', role:'interval'});
data.addColumn({id:'i1', type:'number', role:'interval'});
data.addColumn('number', 'YoY');
data.addRows([
['2011-I', 1748731, 1748731, 1748731, 6.48],
['2011-II', 1816268, 1816268, 1816268, 6.27],
['2011-III', 1881850, 1881850, 1881850, 6.01],
['2011-IV', 1840786, 1840786, 1840786, 5.94],
['2012-I', 1855580, 1855580, 1855580, 6.11],
['2012-II', 1929019, 1929019, 1929019, 6.21],
['2012-III', 1993632, 1993632, 1993632, 5.94],
['2012-IV', 1948852, 1948852, 1948852, 5.87],
['2013-I', 1958396, 1958396, 1958396, 5.54],
['2013-II', 2036817, 2036817, 2036817, 5.59],
['2013-III', 2103598, 2103598, 2103598, 5.52],
['2013-IV', 2057688, 2057688, 2057688, 5.58],
['2014-I', 2058585, 2058585, 2058585, 5.12],
['2014-II', 2137386, 2137386, 2137386, 4.94],
['2014-III', 2207344, 2207344, 2207344, 4.93],
['2014-IV', 2161553, 2161553, 2161553, 5.05],
['2015-I', 2157848, 2157848, 2157848, 4.82],
['2015-II', 2238762, 2238762, 2238762, 4.74],
['2015-III', 2312640, 2312640, 2312640, 4.77],
['2015-IV', 2273262, 2273262, 2273262, 5.17],
['2016-I', 2264090, 2264090, 2264090, 4.92],
['2016-II', 2354798, 2354798, 2354798, 5.18],
['2017-II', 2500000, 1500000, 5000000, 6.17],
]);
var options_lines = {
title: 'TOTAL GDP INDONESIA',
width: '1360',
height: '350',
lineWidth: 3,
intervals: {
style: 'area'
},
vAxes: {
0: {format: '###,###', viewWindow: { min: 0 }, gridlines: {count: 6, color: 'none'}, textStyle: {color:'black', bold: 'true'} },
1: {format: '', viewWindow: { min: 0, max: 10 }, gridlines: {count: 6, color: 'none'}, textStyle: {color:'blue', bold: 'true'} }
},
hAxis: {
textStyle: {
color: 'black',
bold: true
}
},
series: {
0:{
lineWidth: 1,
type: 'area',
targetAxisIndex: 0,
color: 'green'
},
1:{
lineWidth: 3,
type: 'line',
targetAxisIndex: 1,
curveType: 'function' // <-- move here
}
},
legend: {
textStyle: {color:'purple', bold:'true'}
}
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart'));
chart_lines.draw(data, options_lines);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>关于javascript - Google Chart 无法正确显示我的间隔图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44562863/