javascript - 如何增加 Google Charts 中 y 轴的长度？

Question

我正在使用 Google 图表。我正在使用的 JavaScript:

function drawChart3() {
    var data3 = google.visualization.arrayToDataTable([
        ['Day', 'Sales','exp'],
        ['4-APRIL-16', 1000,200],
        ['5-APRIL-16', 1170,300],
        ['6-APRIL-16', 660,400],
        ['7-APRIL-16', 1030,500],
        ['8-APRIL-16', 60,4100],
        ['9-APRIL-16', 130,5020],
        ['10-APRIL-16', 60,4100],
        ['11-APRIL-16', 130,5020],
    ]);

    var options3 = {
        title: 'Company Performance',
        curveType: 'function',
        legend: {
            position: 'bottom'
        }
    };

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

    chart3.draw(data3, options3);

如果您看到页面图像，则日期的 y 轴标签未对齐。如何正确对齐它们？

Answer 1

您有两种选择。图表的尺寸将通过以下方式设置:

• 包含元素的尺寸，或者:
• 通过在图表选项中设置高度和宽度属性。

下面将向您展示根据您的代码改编的两种方法。

http://jsbin.com/televe/edit?html,css,js,console,output

或者:

#curve_chart {
  width: 200px;
}

或

var options4 = {
  title: 'Company Performance',
  curveType: 'function',
  height: 400,
  width: 300,
  legend: {
  position: 'bottom'
  }
};

宽度由您决定。

引用: https://developers.google.com/chart/interactive/docs/basic_customizing_chart#specify-options