Google LineChart圖例和網格線

Question

我想讓this Google LineChart看起來更像this chart from GitHub。我正在重新創建GitHub的圖表，因爲我想要一個高質量（矢量）的版本，而不是高度壓縮的JPEG（他們正確的思想是將圖表保存爲JPEG圖表！）。

我想將圖例移動到圖形中並添加垂直網格線（在水平軸「Year」上）。有誰知道如何做到這一點？

下面的代碼，但請隨時編輯my JSFiddle：

google.load('visualization', '1', {packages: ['corechart', 'line']}); 
google.setOnLoadCallback(function() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'JavaScript', 'Java', 'Ruby', 'PHP', 'Python', 'CSS', 'C++', 'Objective C', 'C', 'C#', 'Perl', 'Emacs Lisp', 'VimL', 'Shell','HTML'], 
     ['2008', 2,    7,  1,  4,  3,   null, 8,  9,    5,  null, 6,  null,   null,  null, null], 
     ['2009', 2,    7,  1,  4,  3,   null, 8,  9,    6,  null, 5,  10,    null,  null, null], 
     ['2010', 2,    5,  1,  4,  3,   null, 8,  9,    6,  null, 7,  null,   10,   null, null], 
     ['2011', 2,    5,  1,  4,  3,   null, 7,  8,    6,  10,  9,  null,   null,  null, null], 
     ['2012', 2,    3,  1,  4,  5,   null, 7,  8,    6,  9,  null, null,   null,  10,  null], 
     ['2013', 1,    3,  2,  4,  5,   10,  7,  8,    6,  9,  null, null,   null,  null, null], 
     ['2014', 1,    2,  3,  4,  5,   6,  7,  9,    8,  10,  null, null,   null,  null, null], 
     ['2015', 1,    2,  3,  4,  5,   6,  7,  null,   9,  8,  null, null,   null,  null, 10] 
    ]); 

    var options = { 
     title: 'Rank of top languages on GitHub over time', 
     width: '100%', 
     height: 600, 
     hAxis: { 
      title: 'Time', 
     }, 
     vAxis: { 
      title: 'Rank', 
      viewWindow: { 
       min: 1 
      }, 
      direction: -1, 
      gridlines: { 
       count: 11 
      } 
     } 
    }; 

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

    chart.draw(data, options); 
}); 

Answer 1

更改數據類型 - >類型： '日期'

google.load('visualization', '1.1', {packages: ['corechart', 'line']}); 
google.setOnLoadCallback(function() { 
    var data = google.visualization.arrayToDataTable([ 
    [{label: 'Year', type: 'date'}, 'JavaScript', 'Java', 'Ruby', 'PHP', 'Python', 'CSS', 'C++', 'Objective C', 'C', 'C#', 'Perl', 'Emacs Lisp', 'VimL', 'Shell','HTML'], 
    [new Date(2008, 0, 0), 2, 7,  1,  4,  3,   null, 8,  9, 5,  null, 6,  null,   null,  null, null], 
    [new Date(2009, 0, 0), 2, 7,  1,  4,  3,   null, 8,  9,    6,  null, 5,  10,    null,  null, null], 
    [new Date(2010, 0, 0), 2, 5,  1,  4,  3,   null, 8,  9,    6,  null, 7,  null,   10,   null, null], 
    [new Date(2011, 0, 0), 2, 5,  1,  4,  3,   null, 7,  8,    6,  10,  9,  null,   null,  null, null], 
    [new Date(2012, 0, 0), 2, 3,  1,  4,  5,   null, 7,  8,    6, 9,  null, null,   null,  10,  null], 
    [new Date(2013, 0, 0), 1, 3,  2,  4,  5,   10,  7,  8,    6,  9,  null, null,   null,  null, null], 
    [new Date(2014, 0, 0), 1, 2,  3,  4,  5,   6,  7,  9,    8,  10,  null, null,   null,  null, null], 
    [new Date(2015, 0, 0), 1, 2,  3,  4,  5,   6,  7,  null,   9,  8,  null, null,   null,  null, 10] 
]); 

var options = { 
    title: 'Rank of top languages on GitHub over time', 
    width: '100%', 
    height: 800, 
    hAxis: { 
     title: 'Time', 
     gridlines: { 
      count: -1 
     }, 
    }, 
    vAxis: { 
     title: 'Rank', 
     viewWindow: { 
      min: 1 
     }, 
     direction: -1, 
     gridlines: { 
      count: -1 
     } 
    } 
}; 

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

chart.draw(data, options); 
}); 

https://jsfiddle.net/mblenton/x00omtxL/15/