个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我想在 Google Charts 的轴标签上使用文本标签而不是数字标签。如何存档？结果应如下所示(气泡图示例):
我在 stackoverflow 的某个地方找到了这个例子，但现在我找不到了。不管怎样，那里的答案是不完整的，没有用。它不包含整个 HTML 并且具有 undefined variable 。设置轴步进也很重要，否则你只会看到每隔一个标签或每隔 10 个...
最佳答案
这是创建上面图表的完整 HTML + JS 源代码。
它包含将两个轴上的标签转换为字符串(在数组中定义)。它还包含设置轴步长，以便所有标签都可见。
我希望它对某人有用:)
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart () {
//these arrays hold the label strings
var products = new Array();
for (var i = 1; i < 10; i ++)
products[i]='product'+i;
var customers = new Array();
for (var i = 1; i < 8; i ++)
customers[i]='customer'+i;
var options = {
'title':'Customer / Product Grid',
// 'vAxis': { textPosition: 'in' },
vAxis: {
viewWindow: {
max: products.length,
min: 0,
},
gridlines: {
count: products.length,
color : 'white',
}
},
hAxis: {
viewWindow: {
max: customers.length,
min: 0,
},
gridlines: {
count: customers.length,
color : 'white',
}
},
'width': 1000,
'height':500
};
//dtd
var customer_product_grid_data_table = new google.visualization.DataTable();
customer_product_grid_data_table.addColumn('string', 'Customer and Product');
customer_product_grid_data_table.addColumn('number', 'Customer');
customer_product_grid_data_table.addColumn('number', 'Product');
customer_product_grid_data_table.addColumn('number', 'Profit Margin');
customer_product_grid_data_table.addColumn('number', 'Proportion of Sales');
// add some random numbers to show off
for (var i = 1; i < products.length; i ++)
for (var j = 1; j < customers.length; j ++)
{
customer_product_grid_data_table.addRow([
'',j,i,50*Math.cos(i+j),20*Math.sin(i)
]);
}
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(customer_product_grid_data_table, options);
/*
* This can also be
* text[text-anchor="start"]
* or
* text[text-anchor="middle"]
* depending on the axis settings. If it doesnt work, try another one, or check the generated SVG source code in your HTML doc.
*/
for ( var i = 0; i < products.length ; i ++ ){
$('#chart_div svg text[text-anchor="end"]:contains("'+i+'")').text(function(j,t){
if (t == i){
if (i >= products.length || i < 1){
return " ";
}
return products[i];
}
});
}
for ( var i = 0; i < customers.length ; i ++ ){
$('#chart_div svg text[text-anchor="middle"]:contains("'+i+'")').text(function(j,t){
if (t == i){
if (i >= customers.length || i < 1){
return " ";
}
return customers[i];
}
});
} // end function
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
关于javascript - 如何将 Google Charts 的轴标签设置为字符串/文本/名义/类别而不是数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17461414/
25
4
0
我是一名优秀的程序员,十分优秀！