谷歌可视化图表

Question

我对我的图表的位置有问题，我想把图表100%的宽度从开始到结束。

​

​

我的代码

test.controller('testCtrl', ['$scope', function ($scope) {
console.log('test chart');
var data = google.visualization.arrayToDataTable([
    ['Minute', 'A', 'B', 'C', 'D', 'E', 'F'],
    ['0 min', 0.72, 0.64, 0.55, 0.47, 0.68, 0.39],
    ['', 0.62, 0.69, 0.65, 0.51, 0.66, 0.37],
    ['45 min', 0.69, 0.51, 0.55, 0.43, 0.54, 0.44],
    ['', 0.79, 0.68, 0.70, 0.57, 0.59, 0.41],
    ['90 min', 0.66, 0.71, 0.66, 0.58, 0.63, 0.48]
]);
var options = {
    width: '100%',
    height: '100%',
    curveType: 'function',
    chartArea: {
        width: '90%',
        height: '80%'
    },
    legend: {
        position: 'top'
    }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}]);

谢谢你帮忙！

Answer 1

把线延伸到图表区域的边缘，

将需要使用连续x轴 ('number'、'date'等)，

与离散值('string'值)

参见下面的工作片段。

数据表第一列中的值被更改为简单数字(0-4)。

然后使用对象表示法来分配标签，

使用hAxis.ticks

​

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
      ['Minute', 'A', 'B', 'C', 'D', 'E', 'F'],
      [0, 0.72, 0.64, 0.55, 0.47, 0.68, 0.39],
      [1, 0.62, 0.69, 0.65, 0.51, 0.66, 0.37],
      [2, 0.69, 0.51, 0.55, 0.43, 0.54, 0.44],
      [3, 0.79, 0.68, 0.70, 0.57, 0.59, 0.41],
      [4, 0.66, 0.71, 0.66, 0.58, 0.63, 0.48]
  ]);
  var options = {
      width: '100%',
      height: '100%',
      curveType: 'function',
      chartArea: {
          width: '90%',
          height: '80%'
      },
      legend: {
          position: 'top'
      },
      hAxis: {
          ticks: [
              {v: 0, f: '0 min'},
              {v: 1, f: ''},
              {v: 2, f: '45 min'},
              {v: 3, f: ''},
              {v: 4, f: '90 min'}
          ]
      }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

​