Google Charts Bubble Charts分类x和y轴，而不是数字 [英] Google Charts Bubble Charts categorical x and y axes instead of numeric

问题描述

我使用 Google图表。以下是图表的照片：

I have created a beautiful bubble chart using Google Charts. Here is a shot of the chart:

沿x轴的数字表示个别客户。沿y轴的数字表示各个产品。大家可以看到，大约有23个客户和7个产品。

The numbers along the x-axis represent individual customers. The numbers along the y-axis represent individual products. As you all can see, there are about 23 customers and 7 products.

问题是X轴和Y轴只能是数字的文档）。我希望能够沿轴显示客户和产品的字符串值，而不仅仅是代表整数。

The problem is that the X and Y axes can only be numeric (as far as I know from the documentation). I wish to be able to display the string values for the customers and products along the axes instead of just representative integers. This will make it easier to understand what we are looking at.

有没有人知道如何完成这项工作？

Does anyone know how this can be accomplished?

我有JS数组，其中包含客户和产品字符串。它们的整数指数对应于图表上显示的数字。例如：

I do have JS arrays which contain the customer and product strings. Their integer indices correspond to the numbers that show up on the chart. For example:

customers[6] = "Microsoft"
customers[7] = "Dell"
...

但现在只显示整数。

任何帮助将非常感谢！非常感谢！

Any help would be greatly appreciated! Thanks!

这是我用来定义图表的代码：

Here is the code I used to define the chart:

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

推荐答案

从我做的所有搜索判断，答案在这里由jmac，我决定唯一的方法是一个Javascript hack用字替换轴数字。我实现的代码在这里：

Judging from all the searching I did, and also the answer given here by jmac, I decided the only way to go was a Javascript hack to replace the axes numbers with words. The code I implemented is here:

    /*
     *
     * 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 的东西，要么用数组中的一个元素替换整数，或者只是使它为空白。

Basically, you just make a for loop that iterates through all the integers that you are showing on the x and y axes. Do some if...else stuff to either replace the integer with an element from the array, or just make it blank.

请注意，为了使上述代码正常工作，您需要在图表选项中具有以下属性： vAxis：{textPosition：'in'}

Keep in mind for the above code to work properly, you need to have the following property in the chart options -> vAxis: { textPosition: 'in' }

这篇关于Google Charts Bubble Charts分类x和y轴，而不是数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！