Google可視化圖表

我的圖表位置有問題，我想從圖表開始到結束都將圖表放置爲100％。Google可視化圖表

我的代碼

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

感謝您的幫助！

來源

2017-08-29 mrkibzk

請將完整的代碼與HTML一起添加，最好用jsFiddle之類的代碼：https：//jsfiddle.net/ – Sventies

拉伸線到圖表區域的邊緣，
將需要使用一個continuous x-axis（'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>

來源

2017-08-29 11:26:27 WhiteHat

Google可視化圖表

回答

相關問題