谷歌图表气泡图分类x和y轴，而不是数字(Google Charts Bubble Charts ca

我创建使用一个美丽的气泡图谷歌图表。以下是图表的一个镜头：

沿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);

Answer 1:

从所有搜索我做，也可以通过这里联合分析小组给出的答案来看，我决定去的唯一途径是一个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' }