Tom*_*Tom 6 javascript charts google-visualization
这让我疯了.我无法让传说完全移动.这将生成一个图表,其右侧是默认位置的图例.
我显然已将传说位置声明为"底部",但它不起作用.然而,这正是文档所说的.
google.charts.load('current',{'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
['Smith', 35, {v: -.1126, f: '-11.26%'} ],
['Chalk', 53, {v: -.0126, f: '-1.26%'} ],
['Hank', 84, {v: -.0252, f: '-2.52%'} ],
['Jordan', 46, {v: .0688, f: '6.88%'} ],
['Bernie', 1, {v: 0, f: '-'} ],
['Ralph', 105, {v: -.0548, f: '-5.48%'} ]
]);
var options = {
series: {
0: {axis: 'Quotes'},
1: {axis: 'Percent'}
},
axes: {
y: {
Quotes: {label: 'Subdmission Count'},
Percent: {label: '% Percent'}
}
},
legend: {
position : 'bottom'
}
};
var table = new google.charts.Bar(document.getElementById('table1'));
table.draw(data, options);
}<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id='table1'></div>
</body>
</html>legend.position: ['top', 'bottom']- 只是在材料图表上不起作用的众多选项中的几个
看到物料图表功能奇偶#2143跟踪问题进行了广泛的列表
但是,这些选项将适用于核心图表......
核心 - > google.visualization.ColumnChart- 使用 - >packages: ['corechart']
材料 - > google.charts.Bar- 使用 - >packages: ['bar']
还有一个选项可以使核心图表接近材料的外观和感觉
theme: 'material'
请参阅以下使用核心图表的工作代码段...
google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
['Smith', 35, {v: -.1126, f: '-11.26%'} ],
['Chalk', 53, {v: -.0126, f: '-1.26%'} ],
['Hank', 84, {v: -.0252, f: '-2.52%'} ],
['Jordan', 46, {v: .0688, f: '6.88%'} ],
['Bernie', 1, {v: 0, f: '-'} ],
['Ralph', 105, {v: -.0548, f: '-5.48%'} ]
]);
var options = {
chartArea: {
height: '56%'
},
series: {
1: {
targetAxisIndex: 1
}
},
hAxis: {
title: 'Name'
},
vAxes: {
0: {
title: 'Submission Count'
},
1: {
title: '% Percent'
}
},
theme: 'material',
legend: {
position : 'bottom'
}
};
var table = new google.visualization.ColumnChart(document.getElementById('table1'));
table.draw(data, options);
}<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id='table1'></div>
</body>
</html>| 归档时间： |
|
| 查看次数： |
5292 次 |
| 最近记录： |