javascript - Google Chart 无法正确显示我的间隔图表

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>