2017-10-13 7 views
1

私は伝説を変えたいと思います。私はぺージを削除して、すべてのタイトルを1行または2行にする必要があります。そして私はアイコンを変更したいと思います。Googleの図表 - 凡例

それは次のように

を見ています私はscrollArrowsを入れて、この

enter image description here

ような何か希望: 'なし' を、それは動作しません。

var optionsMobile = { 
width: '100%', 
height: '100%', 
pointSize: 5, 
series: { 
    pointShape: 'circle' 
}, 
chartArea: { 
    width: '80%', 
    height: '70%' 
}, 
legend: { 
    position: 'bottom', 
    textStyle: { 
     color: 'white' 
    }, 
    pagingTextStyle: { color: '#666' }, 
    scrollArrows: 'none' 
}, 
backgroundColor: 'transparent', 
titleTextStyle: { 
    color: 'white', 
    height: "40px" 
}, 
hAxis: { 
    textStyle: { 
     color: 'white' 
    } 
}, 
vAxis: { 
    textStyle: { 
     color: 'white' 
    } 
}, 
}; 

答えて

1

configuration optionsによると...

あなたの伝説に行を追加するために1よりも大きな数にlegend.maxLinesを設定します。 これは、コントローラの私のコードです。
このオプションは現在のところlegend.position: 'top'
でのみ動作します注:実際に描画される行数を決定するために使用される正確なロジックは依然として流動的です。

var options = { 
    legend: { 
    maxLines: 2, 
    position: 'top' 
    } 
}; 

...作業スニペット以下

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'NYCLS 2016 Boys', 'NYCLS 2016 Girls', 'NYCLS 2017 Boys', 'NYCLS 2017 Girls'], 
 
    [1, 10, 15, 20, 25], 
 
    [2, 12, 18, 24, 30], 
 
    [3, 14, 21, 28, 35], 
 
    [4, 16, 24, 32, 40] 
 
    ]); 
 

 
    var options = { 
 
    legend: { 
 
     maxLines: 2, 
 
     position: 'top' 
 
    }, 
 
    width: 360 
 
    }; 
 

 
    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>

を見ます
関連する問題