Question

我想创建柱形图，其中X轴数值为1,2,3,4 ... N和Y值当然在每列上都不同。我无法找到如何在条形图下的X线上更改标签。例如 - 1可以标记为Elephant，2可以标记为Horse等。

我可以使用字符串作为X值，但是没有办法让缩放工作。至少，我没有找到任何方法让它发挥作用。

使用字符串的简单示例，我希望获得与此相同的外观，但在X轴上使用数值。

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

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'animal');
  data.addColumn('number', 'count');

  data.addRows([
    ['Elephant', 5],
    ['Horse', 2],
    ['Dog', 7],
    ['Cat', 4],
  ]);

  var options = {
  explorer: {
        axis: 'horizontal',
        keepInBounds: true,
},

    title: 'Testing',
    hAxis: {
      title: 'Animal',
    },
    vAxis: {
      title: 'number'
    }
  };

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

  chart.draw(data, options);
}

图表看起来应该是这样的，但是有了工作缩放功能： Chart example

Answer 1

在continuous轴上使用字符串标签，
您需要提供自己的ticks

使用对象表示法，提供值（v:）和格式化值（f:）

{v: 1, f: 'Elephant'}

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

＆＃13;

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart']
});

function drawBasic() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'animal');
  data.addColumn('number', 'count');
  data.addRows([
    [1, 5],
    [2, 2],
    [3, 7],
    [4, 4]
  ]);

  var options = {
    explorer: {
      axis: 'horizontal'
    },
    title: 'Testing',
    hAxis: {
      ticks: [
        {v: 1, f: 'Elephant'},
        {v: 2, f: 'Horse'},
        {v: 3, f: 'Dog'},
        {v: 4, f: 'Cat'}
      ],
      title: 'Animal',
    },
    vAxis: {
      title: 'number'
    }
  };

  var chart = new google.visualization.ColumnChart(
    document.getElementById('chart_div')
  );
  chart.draw(data, options);
}

＆＃13;

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

＆＃13;

Google柱形图X轴标签与价值不同

1 个答案: