如何放大 google 条形图的文字大小并在每个条形图上显示 x 值？

Question

大家早上好，

我对条形图值的大小有疑问。 x 值像 0,5,10,15,20,23 五乘五，但我希望它像 0,1,2,3 一样一一。

另一个问题是，我希望 y 值显示在每个条形图的顶部。如果第 23 个柱的值是 10，它必须显示在第 23 个柱的顶部，因为人们应该很容易从远处看到图表值。

我的最后一个问题是我想放大图表的 x 和 y 值的大小，但我只能放大标签。我找不到正确的选项。

差点忘了，我还有一个关于图例的问题。如果图例在右侧，图表会变小，但我无法将图例移动到顶部或底部。即使在代码中说它显示在右侧的图例底部。

我的代码在这里

 function drawPaLoChart() {
    var data = [['Hours', 'Label1', 'Label2']];



    for (var i=0; i<pageload.length;i++){
        data.push([pageload[i][0], pageload[i][1], pageload[i][2] ]);
    }

    var data = google.visualization.arrayToDataTable(data);


    var options = {

     'fontSize': 30,

        chart: {

            'width': 600,

            title: 'Hourly Page Load Times',


        },

            legend: { position: 'bottom' },


            bar: { groupWidth: "100%" },
            backgroundColor: {fill: 'transparent'},
            chartArea: {
                backgroundColor: 'transparent'

            },
        'tooltipFontSize':22






    };

    var chart = new google.charts.Bar(document.getElementById('palochart'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
}

Answer 1

要为条形图添加标签，需要为数据添加注释列角色table。

但是，您使用的是 material 条形图。

material 图表不支持列角色以及其他几个选项。
参见 --> Tracking Issue for Material Chart Feature Parity

material = google.charts.Bar -- packages: ['bar']

经典 = google.visualization.ColumnChart -- packages: ['corechart']

使用经典图表，我们可以使用数据视图来添加注释列角色。
请参阅以下片段...

function drawPaLoChart() {
  var data = [
    ['Hours', 'Label1', 'Label2']
  ];

  for (var i = 0; i < pageload.length; i++) {
    data.push([pageload[i][0], pageload[i][1], pageload[i][2]]);
  }

  var data = google.visualization.arrayToDataTable(data);

  var options = {
    fontSize: 30,
    width: 600,
    title: 'Hourly Page Load Times',
    legend: {
      position: 'bottom'
    },
    bar: {
      groupWidth: "100%"
    },
    backgroundColor: {
      fill: 'transparent'
    },
    chartArea: {
      backgroundColor: 'transparent'
    },
    tooltipFontSize: 22
  };

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

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

  // use data view to draw chart
  chart.draw(view, options);
}

如何放大 google 条形图的文字大小并在每个条形图上显示 x 值？

How can I enlarge text size of google bar chart and show x value on each bar?

javascript

charts

google-api

google-visualization

bar-chart