0
Follow
0
View

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

evilrise 注册会员
2023-01-25 23:43

instead of using a string for the value: '2010'
you'll need to use a number: 2010

this will allow you to customize the ticks in the options...

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

hAxis.ticks does not work when the x-axis value is a string

as for the ip, you can use the number value,
but here, I included the object notation,
so a comma is not displayed in the tooltip: 2,010

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

see following working snippet...

google.charts.load('current', {packages: ['chart', '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);
    }

  

About the Author

Question Info

Publish Time
2023-01-25 23:43
Update Time
2023-01-25 23:43

Related Question

Symfony 5 ApiKeyAuthenticator with SelfValidatingPassport

如何在MERN中前端显示Mongo数据

请教python问题

opencv python 使用两个轮廓检测问题。

为什么我的Firebase云Firestore数据文档随机显示?

json获取数组中的数据

"UA_decodeBinary"不能解码ExtensionObject

TypeGraphQL_How避免创建未输入的字段

DataBricks UnityCatalog创建表失败,提示“Failed to acquire a SAS token UnauthorizedAccessException: PERMISSION_DENIED: request not authorized”。

使用Jackson解析kotlin中的通用密封类