Google Gauge Chart - 为每个仪表部分添加文本标签

时间:2016-10-02 19:16:45

标签: charts google-visualization google-gauges

我正在尝试在我的页面中使用Google规格图表。现在我想在图表中为每个部分或颜色添加文本。我可以在图表中这样做吗?我尝试做一些html修改但没有帮助。

尝试使用此链接 - https://developers.google.com/chart/interactive/docs/gallery/gauge enter image description here

所以例如,我想为白色添加text1等等。

1 个答案:

答案 0 :(得分:3)

使用majorTicks配置选项为主要刻度线提供标签

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

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Gauge(container);

    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Memory', 80],
      ['CPU', 55],
      ['Network', 68]
    ]);

    var options = {
      width: 600, height: 200,
      redFrom: 90, redTo: 100,
      yellowFrom:75, yellowTo: 90,
      majorTicks: ['A', 'B', 'C', 'D', 'E'],
      minorTicks: 3
    };

    chart.draw(data, options);
  },
  packages: ['gauge']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>