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可视化图表

回答

相关问题