將水平標題與Google LineCharts的頂部對齊

Question

有什么方法可以使水平標題與折線圖的頂部對齊？ 就我而言，日期應該在頂部，而不是底部。

我正在嘗試通過嘗試設置side：'top'的axis選項（如https://developers.google.com/chart/interactive/docs/gallery/linechart#Top-X所述 ），但這似乎並非工作。 關於如何使其運作的任何想法？

我的示例代碼如下。

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBasic);

function drawBasic() {

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Dates');
    data.addColumn('number', 'Numbers');


    data.addRows([
        [new Date(2015, 1, 1), 1],
        [new Date(2015, 4, 1), 10],
        [new Date(2015, 5, 1), 3],
        [new Date(2015, 8, 1), 20],
    ]);

    var options = {
        axes: {
            x: {
                0: {
                    side: 'top'
                }
            }
        }
    };

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

    chart.draw(data, options);
}

提前致謝。

Answer 1

信息

嗯 我將日期更改為正確的年份，並且看來效果很好。
當您告訴Chart期望一個日期並且給它一個未來18100年的日期時，Chart可能會感到困惑。 如果日期和值表示銷售預測，則似乎相當樂觀：P

也可能是您從google.visualization命名空間創建了圖表，而不是像在他們使用google.charts的示例中一樣……不確定兩者之間的區別到底是什么，但是當我嘗試另一個命名空間時，該選項不起作用。

哦，好了，下面是一段工作代碼和結果圖片：3
祝好運！

---

JSFiddle | 碼

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBasic);

function drawBasic() {
  var data = new google.visualization.DataTable();    
  data.addColumn('date', 'Dates');
  data.addColumn('number', 'Numbers');

  data.addRows([
      [new Date(2015, 1, 1), 1],
      [new Date(2015, 4, 1), 10],
      [new Date(2015, 5, 1), 3],
      [new Date(2015, 8, 1), 20],
  ]);

  var options = {
    axes: {
      x: {
        0: {side: 'top'}
      }
    }
  };

  var chart = new google.charts.Line(document.getElementById('container'));

  chart.draw(data, options);
}

---

結果

Answer 2

使用corechart中的LineChart時，您無法實現此目的。 您將不得不使用Line（來自Line包）。
如果您查看已發布的鏈接，則會看到它說：
Note: Top-X axes are available only for Material charts (ie, those with package line).

因此，僅憑普通的LineChart就無法實現所需的功能。 我得到的一個想法是，您嘗試計算所需信息的位置，然后使用純HTML生成它們。 這將是一種非常骯臟的方法，您將必須知道數據量，或者在計算圖表之后並繪制之前使用Javascript執行所有計算。

無論如何，我試圖硬編碼一個例子。 嘗試向其中添加一些數據行，您將看到文本仍然看起來相同。

http://jsfiddle.net/atgb7pd9/1/