javascript – Google Charts Bubble Charts分类x和y轴而不是数字

2019-10-08 17:40:15 阅读：156 来源： 互联网

标签：javascript charts google-visualization

我使用Google Charts创建了一个漂亮的气泡图.这是图表的一个镜头：

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

解决方法:

从我所做的所有搜索以及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’}

标签：javascript,charts,google-visualization
来源： https://codeday.me/bug/20191008/1873177.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Google Charts Bubble Charts分类x和y轴而不是数字