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);
}]);
感谢您的帮助!
答
拉伸线到图表区域的边缘,
将需要使用一个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>
请将完整的代码与HTML一起添加,最好用jsFiddle之类的代码:https://jsfiddle.net/ – Sventies