Googleの縦棒グラフ値と異なるX軸ラベル

Question

X軸の数値1,2,3,4 ...と縦棒グラフを作成したいと思います。もちろん、NとYの値はすべての列で異なります。 バーの下にあるX行のラベルを文字列に変更する方法がわかりません。例えば、1はエレファント、2は馬などとしてマークすることができます。

文字列をX値として使用できますが、ズーム操作を行う方法はありません。少なくとも、私はそれを働かせる方法を見つけませんでした。

文字列を使った簡単な例ですが、これと同じ外観を実現したいと思いますが、X軸の数値を使用します。あなたがオブジェクトの表記法を使用して、独自のticks

を提供する必要がありますcontinuous軸上の文字列のラベルを使用する Chart example

Answer 1

、
：

google.charts.load('current', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawBasic); 

function drawBasic() { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'animal'); 
    data.addColumn('number', 'count'); 

    data.addRows([ 
    ['Elephant', 5], 
    ['Horse', 2], 
    ['Dog', 7], 
    ['Cat', 4], 
    ]); 

    var options = { 
    explorer: { 
     axis: 'horizontal', 
     keepInBounds: true, 
}, 

    title: 'Testing', 
    hAxis: { 
     title: 'Animal', 
    }, 
    vAxis: { 
     title: 'number' 
    } 
    }; 

    var chart = new google.visualization.ColumnChart(
    document.getElementById('chart_div')); 

    chart.draw(data, options); 
} 

チャートは次のようになりますが、ズームを作業とすべきです値（v:）とフォーマットされた値（f:）

{v: 1, f: 'Elephant'} 

作業スニペット以下を参照してください...

google.charts.load('current', { 
 
    callback: drawBasic, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawBasic() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'animal'); 
 
    data.addColumn('number', 'count'); 
 
    data.addRows([ 
 
    [1, 5], 
 
    [2, 2], 
 
    [3, 7], 
 
    [4, 4] 
 
    ]); 
 

 
    var options = { 
 
    explorer: { 
 
     axis: 'horizontal' 
 
    }, 
 
    title: 'Testing', 
 
    hAxis: { 
 
     ticks: [ 
 
     {v: 1, f: 'Elephant'}, 
 
     {v: 2, f: 'Horse'}, 
 
     {v: 3, f: 'Dog'}, 
 
     {v: 4, f: 'Cat'} 
 
     ], 
 
     title: 'Animal', 
 
    }, 
 
    vAxis: { 
 
     title: 'number' 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.ColumnChart(
 
    document.getElementById('chart_div') 
 
); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>