areaChart中右侧和左侧的间隙

时间:2017-11-19 14:55:48

标签: javascript charts google-visualization

我正在使用Google Charts来显示某些数据。在有边框的容器中绘制全宽图表时,我可以看到左侧和右侧的小间隙。是否可以将其删除?图表区域宽度设置为100%。

enter image description here

JS:

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales'],
    ['2013',  1000],
    ['2014',  1170],
    ['2015',  660],
    ['2016',  1030]
  ]);

  var options = {
    hAxis: {
      textPosition: 'none',
      gridlines: {
        color: 'transparent'
      }
    },
    vAxis: {
      textPosition: 'none',
      gridlines: {
        color: 'transparent'
      }
    },
    legend: { position: 'none' },
    chartArea: {
      'width': '100%',
      'height': '100%',
      'backgroundColor': '#fff'
    },
    colors: ['#ddd'],
    height: 50,

    lineWidth: 0,
    areaOpacity: 1,
    annotations: {
      stemColor : 'none'
    },
    tooltip : {
      trigger: 'none'
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart'));
  chart.draw(data, options);
}

HTML:

<div class="row">
  <div class="col-md-3">
     <div id="chart"></div>
  </div>
</div>

FIDDLE:https://jsfiddle.net/5m6fLckw/5/

0 个答案:

没有答案
相关问题