2017-08-29 19 views
1

私は自分のチャートの位置に問題があります。最初から最後まで100%の幅を入れたいと思います。助けのためのGoogleの視覚化チャート

enter image description here

私のコード

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

感謝!

+1

を使用して、その後
データテーブルの最初の列の値は、単純な数値(0-4)に変更され

表記はラベルを割り当てるために使用されているオブジェクト、
HTMLと一緒にjsFiddleのような完全なコードを追加してください:https://jsfiddle.net/ – Sventies

答えて

1


continuous x-axis使用する必要があります、グラフエリアのエッジに線を伸ばす('number''date'、など...)、
対離散('string'値)

下記参照働くスニペット。 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>