如何在Google Charts中增加y轴的长度?

时间:2016-05-21 11:59:36

标签: javascript api graph charts google-visualization

我正在使用Google Charts。我正在使用的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轴标签未对齐。如何正确对齐它们?

enter image description here

1 个答案:

答案 0 :(得分:0)

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

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

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

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