在Google供电折线图的x轴上定位点和标签

Question

使用Google的新图表是构建数据图形表示的绝佳方式，但我在Excel中可以做的一些事情我还无法找到使用API​​进行复制的方法。

我想要做的是将在x轴上第一个点绘制的点更接近y轴。目前，第一个点远离y轴绘制，但在我生成的图形中，第一个点应该是数据的原点。这就是我目前所拥有的：

绘制在0,40处的点远离y轴绘制。我想要的是得到一个真正的0,0点，以便为'1'绘制的数据被视为在第一天结束时获取的数据，而在'0'获取的数据仅仅是基线：

我已经为你创建了一个jsfiddle，这里是JavaScript：

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Day');
    data.addColumn('number', 'Slide');
    data.addRows([
        ['0', 40],
        ['1', 36],
        ['2', 32],
        ['3', 28],
        ['4', 24],
        ['5', 20],
        ['6', 16],
        ['7', 12],
        ['8',8],
        ['9', 4],
        ['10', 0],
    ]);

    var options = {
        colors: ['red', 'silver'],
        title: 'Slide',
        hAxis: {minValue: 0}
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
​

和HTML：

<div id="chart_div" style="width: 900px; height: 500px;"></div>

关于自定义轴有一些提示here，但它们除了打破我的图形之外什么都不做！

Answer 1

使用图表时，将x轴定义为字符串会在图表的开头和结尾处产生间隙。这在y轴上的标签和绘制的第一个点之间最为显着，如问题中的图像。

为此，将x轴定义为数字（显然，在适当的地方）：

data.addColumn('number', 'Day');
data.addColumn('number', 'Slide');
data.addRows([
    [0, 40],
    [1, 36],
    [2, 32],
    [3, 28],
    [4, 24],
    [5, 20],
    [6, 16],
    [7, 12],
    [8,8],
    [9, 4],
    [10, 0],
]);

第一列现在是number类型，值现在是数字而不是字符串。请参阅jsfiddle。