如何在 Google 柱形图中的 x 轴刻度和图表悬停上显示不同的文本？

Question

我想在 x 轴刻度和工具提示中显示不同的文本，我尝试在我的数据中将刻度对象设置为 {v: '2010', f: 'abc'}，但是 google 柱形图对轴标签和工具提示使用 'f' 属性。我希望它使用 'v' 作为工具提示，使用 'f' 作为 x 轴上的标签。是否有任何选项可以实现这一目标。下面是我的简单可重现示例。

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

function drawBasic() {


      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        [{v: '2010', f: 'abc'}, 10, 24, 20, 32, 18, 5, ''],
        [{v: '2020', f: 'deg'}, 16, 22, 23, 30, 16, 9, ''],
        [{v: '2030', f: 'ghi'}, 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
        hAxis: {
          format: function (val) {
            console.log('val', val);
          }
        }
      };

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

      chart.draw(data, options);
    }

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

https://jsfiddle.net/0Luock3y/

Answer 1

而不是使用字符串作为值：'2010'
您需要使用一个数字：2010

这将允许您自定义选项中的刻度...

hAxis: {
  ticks: [{v: 2010, f: 'abc'}, {v: 2020, f: 'deg'}, {v: 2030, f: 'ghi'}]
}

当 x-axis 值为字符串

时，

hAxis.ticks 不起作用

tooltip可以使用数值，
但在这里，我包含了对象符号，
因此工具提示中不显示逗号：2,010

[{v: 2010, f: '2010'}, 10, 24, 20, 32, 18, 5, ''],

请参阅以下工作片段...

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

function drawBasic() {


      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        [{v: 2010, f: '2010'}, 10, 24, 20, 32, 18, 5, ''],
        [{v: 2020, f: '2020'}, 16, 22, 23, 30, 16, 9, ''],
        [{v: 2030, f: '2030'}, 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
        hAxis: {
          ticks: [{v: 2010, f: 'abc'}, {v: 2020, f: 'deg'}, {v: 2030, f: 'ghi'}]
        }
      };

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

      chart.draw(data, options);
    }

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

如何在 Google 柱形图中的 x 轴刻度和图表悬停上显示不同的文本？

How to show different texts on x-axis ticks and on chart hover in Google column chart?

javascript

charts

google-visualization