Question

我希望this Google LineChart看起来更像this chart from GitHub。我正在重新创建GitHub的图表，因为我想要一个高质量的版本（矢量），而不是一个高度压缩的JPEG（他们正确的想法，无论如何都将图表保存为JPEG格式。）。

我想将图例移动到图表中并添加垂直网格线（在水平轴上“年”）。有谁知道如何做到这一点？

以下是代码，但请随时修改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

更改数据类型 - ＆gt;输入：'date'

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/

Google LineChart图例和网格线

1 个答案: