Javascript 谷歌图表气泡图分类x轴和y轴,而不是数字
我已经创建了一个美丽的气泡图使用。以下是图表的快照:Javascript 谷歌图表气泡图分类x轴和y轴,而不是数字,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我已经创建了一个美丽的气泡图使用。以下是图表的快照: var options = { 'title':'Customer / Product Grid', 'width': 1000, 'height':500 }; //for customer product grid var customer_product_grid_data_table = new google.visualization.DataTabl
var options = {
'title':'Customer / Product Grid',
'width': 1000,
'height':500
};
//for customer product grid
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');
for (var i = 1; i < customer_product_grid_data.length; i ++){
customer_product_grid_data_table.addRow([
'',
customer_product_grid_data[i][0],
customer_product_grid_data[i][1],
(customer_product_grid_data[i][3] - customer_product_grid_data[i][2]) / customer_product_grid_data[i][3] * 100,
customer_product_grid_data[i][3] / qnty_sell_total
]);
}
var chart = new google.visualization.BubbleChart(document.getElementById('customer_product_grid'));
chart.draw(customer_product_grid_data_table, options);
x轴上的数字代表单个客户。沿y轴的数字表示单个产品。正如大家所看到的,大约有23个客户和7种产品
问题是,据我从文档中了解,X轴和Y轴只能是数字轴。我希望能够沿轴显示客户和产品的字符串值,而不仅仅是代表性整数。这将使我们更容易理解我们在看什么
有人知道如何做到这一点吗
我有包含客户和产品字符串的JS数组。它们的整数指数对应于图表上显示的数字。例如:
customers[6] = "Microsoft"
customers[7] = "Dell"
...
但是现在只显示整数
任何帮助都将不胜感激!谢谢
以下是我用来定义图表的代码:
var options = {
'title':'Customer / Product Grid',
'width': 1000,
'height':500
};
//for customer product grid
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');
for (var i = 1; i < customer_product_grid_data.length; i ++){
customer_product_grid_data_table.addRow([
'',
customer_product_grid_data[i][0],
customer_product_grid_data[i][1],
(customer_product_grid_data[i][3] - customer_product_grid_data[i][2]) / customer_product_grid_data[i][3] * 100,
customer_product_grid_data[i][3] / qnty_sell_total
]);
}
var chart = new google.visualization.BubbleChart(document.getElementById('customer_product_grid'));
chart.draw(customer_product_grid_data_table, options);
不幸的是,对于气泡图或任何使用数值序列作为轴值的东西,没有简单的方法可以做到这一点。您可以按照前面解释的那样解决它 一般的概念是消除“主图表”上的轴标签,并调整网格线以匹配所需的标签数量。然后创建一个仅显示类别的附加虚拟图表,并使用该图表显示标签
不幸的是,在谷歌决定为图表轴实现整个ICU模式集之前,情况就是这样。不幸的是,作为气泡图或任何使用数字序列作为轴值的东西,没有简单的方法可以做到这一点。您可以按照前面解释的那样解决它 一般的概念是消除“主图表”上的轴标签,并调整网格线以匹配所需的标签数量。然后创建一个仅显示类别的附加虚拟图表,并使用该图表显示标签
不幸的是,在谷歌决定为图表轴实现整个ICU模式集之前,情况就是这样…从我所做的所有搜索以及jmac给出的答案来看,我认为唯一的办法是用Javascript黑客将轴数替换为单词。我实现的代码如下:
/*
*
* The following 2 functions are a little hacky, they have to be done after calling the "draw" function
* The bubble chart originally displays only numbers along the x and y axes instead of customer or product names
* These 2 functions replace those numbers with the words for the customers and products
*
*/
for ( var i = -2; i < products.length + 1; i ++ ){
$('#customer_product_grid svg text[text-anchor="start"]:contains("'+i+'")').text(function(j,t){
if (t == i){
if (i >= products.length || i < 0){
return " ";
}
return products[i];
}
});
}
for ( var i = -2; i <= customers.length + 3; i ++ ){
$('#customer_product_grid svg text[text-anchor="end"]:contains("'+i+'")').text(function(j,t){
if (i >= customers.length + 1 || i <= 0){
return " ";
}else if (t == i){
return customers[i-1];
}
});
}
基本上,您只需创建一个for循环,循环遍历在x和y轴上显示的所有整数。执行一些if…else操作,用数组中的元素替换整数,或者将其设为空
请记住,要使上述代码正常工作,您需要在图表选项->vAxis中具有以下属性:{textPosition:'in'}从我所做的所有搜索以及jmac在这里给出的答案来看,我决定唯一的方法是使用Javascript黑客将轴数替换为单词。我实现的代码如下:
/*
*
* The following 2 functions are a little hacky, they have to be done after calling the "draw" function
* The bubble chart originally displays only numbers along the x and y axes instead of customer or product names
* These 2 functions replace those numbers with the words for the customers and products
*
*/
for ( var i = -2; i < products.length + 1; i ++ ){
$('#customer_product_grid svg text[text-anchor="start"]:contains("'+i+'")').text(function(j,t){
if (t == i){
if (i >= products.length || i < 0){
return " ";
}
return products[i];
}
});
}
for ( var i = -2; i <= customers.length + 3; i ++ ){
$('#customer_product_grid svg text[text-anchor="end"]:contains("'+i+'")').text(function(j,t){
if (i >= customers.length + 1 || i <= 0){
return " ";
}else if (t == i){
return customers[i-1];
}
});
}
基本上,您只需创建一个for循环,循环遍历在x和y轴上显示的所有整数。执行一些if…else操作,用数组中的元素替换整数,或者将其设为空
请记住,要使上述代码正常工作,您需要在图表选项->vAxis中具有以下属性:{textPosition:'in'}谢谢,我最终使用jQuery解决了这个问题,将轴数替换为单词。这是一个相当不错的技巧,但现在似乎还可以。谢谢,我最终使用jQuery解决了这个问题,用单词替换轴数。这是一个相当不错的技巧,但目前看来还不错。这是一个很棒的技巧。谢谢分享!这将使其他人在未来的生活中变得更加轻松。你能解释一下它到底是如何工作的吗?您是否正在阅读SVG并能够以某种方式识别轴标签?是的,在Google Chrome中,我打开了开发人员控制台。在显示Elements的选项卡中,您可以找到google图表的div,然后在那里我可以看到包含轴标签的元素。请记住,要使上述代码正常工作,您需要在图表选项->vAxis中具有以下属性:{textPosition:'in'}这是一个非常棒的黑客行为。谢谢分享!这将使其他人在未来的生活中变得更加轻松。你能解释一下它到底是如何工作的吗?您是否正在阅读SVG并能够以某种方式识别轴标签?是的,在Google Chrome中,我打开了开发人员控制台。在显示Elements的选项卡中,您可以找到google图表的div,然后在那里我可以看到包含轴标签的元素。请记住,要使上述代码正常工作,您需要在图表选项->vAxis中具有以下属性:{textPosition:'in'}