Question

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

X轴具有标签，标签始于0,0的任意距离。我需要这些红线和蓝线从X=0开始，并具有第一个X轴标签偏移，以便它位于0,0下方，如以下屏幕截图所示：

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

以下选项（再次从演示代码中）传递到小提琴图：

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图表）

1 个答案: