Question

我在我的grails应用中使用谷歌可视化图表。我使用折线图来显示一些数据，但是当我向数据中添加很多行时，它的行为很奇怪，这些是屏幕

我怎么能防止这种疤痕？当我有很多数据而没有数据时，我喜欢sc sc sc sc sc。。。。。。。。我不是指图表的长度，因为当我添加更多数据时，图表的长度变得越来越大，但标签hAxis标签和vAxis标签的大小越来越大而没有理由这是我创建图表的方式

    visualization.draw(visualization_data, {width: 55840, title: 'Wykres wydajno\u015Bci', vAxis: {textPosition: 'in'}, hAxis: {direction: 1, slantedText: true, slantedTextAngle: 90}, pointSize: 10, chartArea: {top: 10, width: '50%', height: '50%', left: 10}, legend: {position: 'right'}});

和样式

        #linechart {
        overflow-x: scroll;
        overflow-y: hidden; 
        width: 100%;
        height: 500px;
    }

Answer 1

您可以在两个轴上使用textStyle选项＆＃39;设置fontSize

textStyle: {
  fontSize: 12
}

请参阅以下工作代码段...

（但width: 55840似乎太宽了？）

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', '2005');
    data.addColumn('number', '2006');
    data.addRows([
       [new Date('01/01/2016'), 200, 210],
       [new Date('01/02/2016'), 190, 220],
       [new Date('01/03/2016'), 205, 200],
       [new Date('01/04/2016'), 220, 230],
       [new Date('01/05/2016'), 212, 210],
       [new Date('01/06/2016'), 185, 193],
       [new Date('01/07/2016'), 196, 207],
       [new Date('01/08/2016'), 200, 210],
       [new Date('01/09/2016'), 190, 220],
       [new Date('01/10/2016'), 205, 200],
       [new Date('01/11/2016'), 220, 230],
       [new Date('01/12/2016'), 212, 210],
       [new Date('01/13/2016'), 185, 193],
       [new Date('01/14/2016'), 196, 207],
       [new Date('01/15/2016'), 200, 210],
       [new Date('01/16/2016'), 190, 220],
       [new Date('01/17/2016'), 205, 200],
       [new Date('01/18/2016'), 220, 230],
       [new Date('01/19/2016'), 212, 210],
       [new Date('01/20/2016'), 185, 193],
       [new Date('01/21/2016'), 196, 207],
       [new Date('01/22/2016'), 200, 210],
       [new Date('01/23/2016'), 190, 220],
       [new Date('01/24/2016'), 205, 200],
       [new Date('01/25/2016'), 220, 230],
       [new Date('01/26/2016'), 212, 210],
       [new Date('01/27/2016'), 185, 193],
       [new Date('01/28/2016'), 196, 207],
       [new Date('01/29/2016'), 200, 210],
       [new Date('01/30/2016'), 190, 220],
       [new Date('01/31/2016'), 205, 200]
    ]);

    var options = {
      width: 55840,
      height: 800,
      title: 'Wykres wydajno\u015Bci',
      vAxis: {
        textPosition: 'in',
        textStyle: {
          fontSize: 12
        }
      },
      hAxis: {
        direction: 1,
        slantedText: true,
        slantedTextAngle: 90,
        textStyle: {
          fontSize: 12
        }
      },
      pointSize: 10,
      chartArea: {top: 10, width: '50%', height: '50%', left: 10},
      legend: {position: 'right'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('linechart'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linechart"></div>

＆＃13;

折线图自动缩放

1 个答案: