5

Google Charts の軸ラベルに数字の代わりにテキスト ラベルを付けたいのですが、これをアーカイブするにはどうすればよいですか? 結果は次のようになります (バブル チャートの例)。

両方の軸にテキストを含むバブル チャートの例

この例は、stackoverflow のどこかで見つけましたが、今はもう見つかりません。とにかく、そこの答えは不完全で、機能していませんでした。HTML 全体が含まれておらず、未定義の変数が含まれていました。軸のステップを設定することも重要です。そうしないと、ラベルが 1 秒ごとまたは 10 秒ごとにしか表示されません ...

4

3 に答える 3

4

上記のチャートを作成するための完全な HTML + JS ソースを次に示します。

両方の軸のラベルを文字列 (配列で定義) に変換することが含まれます。軸のステップの設定も含まれているため、実際にはすべてのラベルが表示されます。

私はそれが誰かに役立つことを願っています:)

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(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,
        min: 0,
        },
    gridlines: {
        count: customers.length,
        color : 'white',
        }
    },
    '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 

    }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
于 2013-07-04T03:32:15.083 に答える