Google Charts hAxisツールチップ

Question

Google Chartsを使用しています。 私は15店舗とそれぞれのクリック数を表示しようとしています。

これで完全に動作しています。

私の問題はhAxisにあります。あなたが見ることができるように店舗の名前は不完全ですが、これは問題ありませんが、不完全な名前にカーソルを合わせると、下の図のように空の黄色のボックスがツールチップに表示されます。

私はこのツールチップの内容を選択した場合は、その後、私は完全な名前を読むことができます：

私の質問は次のとおりです。

は、それがために、このツールチップのテキストの色を変更することは可能ですそれを読むには？

ありがとうございました。

.goog-tooltip { 
    background-color: cyan; 
    color: magenta; 
    font-weight: bold; 
} 

.goog-tooltip > div { 
    background-color: lime !important; 
} 

が作業スニペットを次のように表示

Answer 1

が軸ツールチップを修正するために、あなたは以下のCSSクラスを変更することができます試してみてください... ...

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

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Year'); 
 
    data.addColumn('number', 'Q1'); 
 
    data.addColumn('number', 'Q2'); 
 
    data.addColumn('number', 'Q3'); 
 
    data.addColumn('number', 'Q4'); 
 

 
    data.addRow(['January 2016', 500, 100, 1200, 1000]); 
 
    data.addRow(['February 2016', 500, 100, 1975, 1000]); 
 
    data.addRow(['March 2016', 500, 100, 1200, 1000]); 
 
    data.addRow(['April 2016', 500, 100, 1200, 1000]); 
 

 
    // find v-axis max value 
 
    var vAxisMax = null; 
 
    for (var i = 1; i < data.getNumberOfColumns(); i++) { 
 
    var range = data.getColumnRange(i); 
 
    vAxisMax = vAxisMax || Math.ceil(range.max/1000) * 1000; 
 
    vAxisMax = Math.max(vAxisMax, Math.ceil(range.max/1000) * 1000); 
 
    } 
 
    // add buffer for annotation 
 
    vAxisMax += 400; 
 

 
    var options = { 
 
    backgroundColor: '#000000', 
 
    chartArea: { 
 
     top: 12, 
 
     bottom: 24, 
 
     left: 72 
 
    }, 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    colors: ['#9427E0'], 
 
    hAxis: { 
 
     slantedText: true, 
 
     textStyle: { 
 
     color: '#ffffff' 
 
     } 
 
    }, 
 
    vAxis: { 
 
     title: 'Amount', 
 
     viewWindow: { 
 
     max: vAxisMax 
 
     } 
 
    }, 
 
    bar: { 
 
     groupWidth: '90%' 
 
    }, 
 
    annotations: { 
 
     style: 'point', 
 
     alwaysOutside: true 
 
    }, 
 
    width: 1100, 
 
    height: 300 
 
    }; 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([ 
 
    0, 
 
    1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 
 
    2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" }, 
 
    3, { calc: "stringify", sourceColumn: 3, type: "string", role: "annotation" }, 
 
    4, { calc: "stringify", sourceColumn: 4, type: "string", role: "annotation" } 
 
    ]); 
 

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

.goog-tooltip { 
 
    background-color: cyan; 
 
    color: magenta; 
 
    font-weight: bold; 
 
} 
 

 
.goog-tooltip > div { 
 
    background-color: lime !important; 
 
}

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

Answer 2

slantedTextAngle

hAxis: {direction:1, slantedText:true, slantedTextAngle:90 },