标签: google-visualization
hAxis标签在Google图表中被截断
通过哪个网站跟踪访问者的数量并对其进行一些分析.我们正在创建一个柱形图,以图形形式显示分析报告.
所有的东西都在图表上正确显示,但我们在haxis上显示网站名称.由于网站名称太长,如"www.google.com",www.facebook.com,这个标签在haxis上被切断了.
绘制图表的代码如下:
function createTodayChart(chartData){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sources');
data.addColumn('number', 'Total Sales');
for (var i in chartData){
//alert(chartData[i][0]+'=>'+ parseInt(chartData[i][1]));
data.addRow([chartData[i][0], parseInt(chartData[i][1])]);
}
var options = {
legend: {position:'top'},
hAxis: {title: 'Sources', titleTextStyle: {color: 'black'}, count: -1, viewWindowMode: 'pretty', slantedText: true},
vAxis: {title: 'Total Sales (in USD)', titleTextStyle: {color: 'black'}, count: -1, format: '$#'},
colors: ['#F1CA3A']
};
var chart = new google.visualization.ColumnChart(document.getElementById('my_div'));
chart.draw(data, options);
}
chartData变量中的数据采用数组形式:
var chartData = [];
cartData.push('www.w3school.com', 106);
cartData.push('www.google.com', 210);
"my_div"的宽度和高度分别为350px和300px.我们还附上了以下问题的屏幕截图:
任何人都可以帮助我,我们如何防止这种切割问题.或者,谷歌图表API中是否有任何方法可以防止这种情况？
等待解决方案.
推荐指数
解决办法
查看次数
Google图表上的最大值和最小值
如何在Google Chart上设置最大值和最小值？
我试过这个没有成功:
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:3000,
min:500
}
}
这是我正在使用的所有代码:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:3000,
min:500
}
},
bars: 'vertical' // Required for …推荐指数
解决办法
查看次数
如何设置工具提示以显示百分比以匹配Google可视化折线图中的轴？
可以使用以下代码将工具提示设置为显示百分比:
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
suffix: '%'
});
formatter.format(data, 1); // Apply formatter to first column.
NumberFormat有没有办法将每个元素乘以100？否则,工具提示显示为.50%.
我使用的vAxis.format = "format:'#%' "是乘以100.因此.5在垂直轴上显示为50%.
根据文档(icu-project.org/apiref),可以通过将%括在单引号中来覆盖,但这不起作用.
最终结果是工具提示与轴不匹配.做这个的最好方式是什么？
谢谢.
推荐指数
解决办法
查看次数
如何将颜色应用于Google Charts API中的饼图切片
嗨,我正在尝试在饼图的切片中应用颜色.我正在使用Google Charts API.
在这里您可以获得所有饼图信息:https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
以下是关于我所说话的捷径:
切片对象数组或具有嵌套对象的对象{}对象数组,每个对象描述饼图中相应切片的格式.要为切片使用默认值,请指定空对象{}.如果未指定切片或值,则将使用全局值.每个对象都支持以下属性:
color - 用于此切片的颜色.指定有效的HTML颜色字符串.textStyle - 覆盖此切片的全局pieSliceTextSlice.您可以指定一个对象数组,每个对象都按照给定的顺序应用于切片,或者您可以指定一个对象,其中每个子对象都有一个数字键,指示它应用于哪个切片.例如,以下两个声明是相同的,并将第一个切片声明为黑色,第四个切片声明为红色:
切片:[{color:'black',{},{},{color:'red'}]切片:{0:{color:'black'},3:{color:'red'}}
不知道我应该把这段代码放在哪里,这里是游乐场:https://code.google.com/apis/ajax/playground/？ type = visualization #pie_chart
这是我的尝试(这不起作用)
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"So, how was your day?", slices: [{color: 'black', {color: 'blue'}, {color: 'green'}, {color: 'red'}, {color: 'white'}]});
} …推荐指数
解决办法
查看次数
谷歌时间轴可视化中的垂直参考线
嗨,我正在使用谷歌可视化API在我的网站绘制时间表图表.它工作得很好.但是有一件事困扰着我.我想在图表区域中显示一条垂直线来表示当前日期.请让我知道任何解决方案.
我的代码:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(2014, 3, 29), new Date(2014, 4, 3)],
[ 'President', 'John Adams', new Date(2014, 2, 3), new Date(2014, 3, 3)],
[ 'President', 'Thomas Jefferson', new Date(2014, …推荐指数
解决办法
查看次数
如何更改谷歌图表标题字体大小？
如何在Google图表中更改标题的字体大小？
var options = {
title: 'My Daily Activities',
'backgroundColor': 'transparent',
is3D: true,
};
推荐指数
解决办法
查看次数
谷歌图表,每个栏的颜色不同
我有这个谷歌条形图:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', '');
data.addRows(2);
data.setValue(0, 0, 'Value 1');
data.setValue(0, 1, 250);
data.setValue(1, 0, 'Value 2');
data.setValue(1, 1, 100);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
width: 400,
height: 175,
title: 'Total',
legend: 'none',
});
}
所有运行都没问题,但问题是,两个条都有相同的颜色,我希望每个条都能有不同的颜色.
谁可以帮我这个事？
推荐指数
解决办法
查看次数
如何在谷歌图表表中隐藏列
我有一个Google Charts Table,它显示了几列和一行.比如说我们有4列(分别是A,B,C,D).我怎么能够仍然加载列C的值,但只是隐藏列,以便它不会显示？
提前致谢!
推荐指数
解决办法
查看次数
如何使谷歌饼图api背景透明
这是饼图char的谷歌代码:
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {backgroundColor: '#676767',
'width':400,
'height':300};
var chart = new google.visualization.PieChart(document.getElementById('priority_customers_report'));
chart.draw(data, options);
}
</script>
这里backgroundColor: '#676767'给我们的颜色现在我希望它是透明的,我该怎么做？
以及如何在底部设置文本？由于在Google文档中不太清楚,因此很难理解.
推荐指数
解决办法
查看次数
谷歌图表整数的垂直轴
我正在尝试配置Google柱形图以整数显示垂直轴,但是当它显示一个小数字(例如1)时,它也显示0.25,0.50等.
反正有改变吗？我一直在阅读文档,找不到任何相关的内容.
谢谢
推荐指数
解决办法
查看次数