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

将线条拉伸到图表区域的边缘，
需要使用continuous x-axis（'number'，'date'等...），
与离散（'string'值）

请参阅以下工作代码段数据表第一列中的值更改为简单数字（0-4）

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

谷歌可视化图表

1 个答案: