Question

我正在使用Google Charts。我正在尝试显示15个商店以及每个商店的点击次数。

现在，这是完美的。

我的问题在于hAxis。正如您所看到的，商店的名称不完整，这很好，但是当我将鼠标悬停在一个不完整的名称上时，工具提示会显示一个空黄色框，如下图所示。

如果我选择此工具提示的上下文，那么我可以阅读全名：

我的问题是：

是否可以更改此工具提示中的文字颜色以便阅读？

感谢。

Answer 1

修改轴工具提示，可以修改以下css类......

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

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

请参阅以下工作代码段...

＆＃13;

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

＆＃13;

.goog-tooltip {
  background-color: cyan;
  color: magenta;
  font-weight: bold;
}

.goog-tooltip > div {
  background-color: lime !important;
}

＆＃13;

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

＆＃13;

Answer 2

尝试slantedTextAngle

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

Google Charts hAxis工具提示

2 个答案: