javascript – 如何将Google Charts的轴标签设置为字符串/文本/名义/类别而不是数字

我想在Google Charts的轴标签上添加文字标签而不是数字.如何存档？结果应如下所示(示例气泡图)：

我在stackoverflow上找到了这个例子,但现在我再也找不到了.无论如何,那里的答案是不完整的,不起作用.它不包含整个HTML并且具​​有未定义的变量.设置轴步进也很重要,否则您只能看到每隔一个标签或每隔10个标签……

最佳答案

以下是用于创建上述图表的完整HTML JS源代码.

它包含将两个轴上的标签转换为字符串(在数组中定义).它还包含设置轴步骤,以便所有标签都可见.

我希望它对某人有用:)

etonLoadCallback(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,gridlines: {
        count: customers.length,'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 

    }
    

原文地址：https://www.jb51.cc/html/425976.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。