谷歌圖的犯規顯示我的間隔圖表正確

Question

所以這是我的顯示間隔表的代碼，但間隔圖表犯規顯示正常，間隔圖表顯示一個水坑

這裏的截圖 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); 
     } 

Answer 1

水坑相同的值是由於 - >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>