Question

我发现Google文档在解释这是否可行方面受到限制

您如何去除Google烛台图表中的所有空白区域。

然后将烛台放在背景元素上代码

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      //label,low,opening,closing,high
      ['09', 1.14799, 1.15027, 1.14848, 1.15275],
      //['15', 1.14775, 1.15027, 1.14776, 1.15275],
      //['20', 1.14772, 1.15027, 1.14807, 1.15275],
      //1.15275 1.14799 1.15027 1.14
      // Treat first row as data as well.
    ], true);

    var options = {
      legend:'none',
      backgroundColor: { fill:'#515151' },
      'width': 100,
      'height': 340,
      chartArea:{left:50,top:20,width:'50%',height:'75%'},
      candlestick: {
                    risingColor: {stroke: '#4CAF50', fill: '#4CAF50'},
                    fallingColor: {stroke: '#F44336', fill: '#F44336'}
                   },
      colors: ['white'],
      hAxis: {title: 'get rid of this space', textPosition: 'none', gridlines: {color: '#515151', count: 0}},
      vAxis: {title: 'get rid of this space', textPosition: 'none', gridlines: {color: '#515151', count: 0}},
      title: 'get rid of this space'
      };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }
    </script>
    <style>
          .background01{background-image: url("../img/Candle_Box_Tag.png")}
    </style>
  </head>
  <body>
    <div class="background01" id="chart_div"></div>
  </body>
</html>

Answer 1

使用chartArea选项将图表拉伸到容器的边缘

chartArea: {
  backgroundColor: 'transparent',
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
  height: '100%',
  width: '100%',
},

将背景和其他各种颜色设置为'transparent'，
那么您可以将任何背景应用于<div>元素

请参阅以下工作片段...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    //label,low,opening,closing,high
    ['09', 1.14799, 1.15027, 1.14848, 1.15275],
    //['15', 1.14775, 1.15027, 1.14776, 1.15275],
    //['20', 1.14772, 1.15027, 1.14807, 1.15275],
    //1.15275 1.14799 1.15027 1.14
    // Treat first row as data as well.
  ], true);

  var options = {
    chartArea: {
      backgroundColor: 'transparent',
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      height: '100%',
      width: '100%',
    },
    backgroundColor: { fill:'transparent' },
    legend:'none',
    width: 50,
    height: 340,
    candlestick: {
      risingColor: {stroke: '#4CAF50', fill: '#4CAF50'},
      fallingColor: {stroke: '#F44336', fill: '#F44336'}
    },
    colors: ['white'],
    hAxis: {textPosition: 'none'},
    vAxis: {
      textPosition: 'none',
      gridlines: {color: 'transparent', count: 0},
      minorGridlines: {color: 'transparent', count: 0}
    }
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

#chart_div {
  background: #515151;
  display: inline-block;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google图表从烛台上除掉蜡烛条以外的所有内容

1 个答案: