水平轴标签未使用 100% 宽度（Google 图表）

Question

这是使用 one of the Google Charts demos 呈现的图表。我的实际用例和这个很像，纵轴是整数标签，横轴是字符串标签。

X 轴的标签似乎从 0,0 的任意距离开始。我需要那些红线和蓝线从 X=0 开始，并移动第一个 X 轴标签，使其位于 0,0 下方，如以下屏幕截图所示：

我已经尝试通过 hAxis 将 minValue 选项传递给水平轴，但这似乎不适用于字符串，就像它对整数一样。

以下选项被传递到 fiddle 图表（同样来自演示代码）：

var options = {
  title: 'Company Performance',
  curveType: 'function',
  legend: { position: 'bottom' }
};

如何对齐 X 轴标签，使它们占据 100% 的图表宽度，第一个标签位于 Y 轴下方？ 我想完成如果可能的话，这来自图表配置本身，而不是 CSS 或无关的 JS。

如果有人也能解释一下这个设置的逻辑，我们将不胜感激。它是默认设置让我觉得很奇怪，根据我使用 google 框架的经验，它们通常会选择符合约定的默认值，但这似乎很荒谬。我希望“2004”标签在 X 轴上左对齐，X 标签之间的间隔均匀分布，“2007”与图表右边缘齐平。

Answer 1

无法解释原因，但这是 discrete axis 的默认行为。

如果您想在 x 轴上显示字符串，
但仍然具有连续轴的行为，
您可以使用 ticks 选项来格式化轴标签。

使用对象表示法，您可以提供每个报价单的值 (v:)，
以及格式化值 (f:)...

{v: 0, f: '2004'}

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    [0, 1000, 400],
    [1, 1170, 460],
    [2, 660,  1120],
    [3, 1030, 540]
  ]);

  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: {position: 'bottom'},
    hAxis: {
      ticks: [
        {v: 0, f: '2004'},
        {v: 1, f: '2005'},
        {v: 2, f: '2006'},
        {v: 3, f: '2007'}
      ]
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  chart.draw(data, options);
});

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

水平轴标签未使用 100% 宽度（Google 图表）

Horizontal axis labels are not using 100% width (Google Charts)

charts

google-visualization