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

Question

这是使用one of the Google Charts demos 渲染的图表。我的实际用例与此非常相似，一个带有整数标签的垂直轴和一个带有字符串标签的水平轴。

小提琴：https://jsfiddle.net/1f0dvehq/

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

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

以下选项正在传递给小提琴图表（同样，来自演示代码）：

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

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

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

Answer 1

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

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

使用对象表示法，您可以提供每个刻度的值 (v:)，
以及格式化的值（f:）...

{v: 0, f: '2004'}

请参阅以下工作 sn-p...

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>