Google图表vAxis [英] Google charts vAxis

问题描述

我建立图形和显示在一个地方使用组合图谷歌在对象vAxis我设置颜色和每个图表的名称：

I build graphics and display in one place using Combo Chart google in the object vAxis I set the color and name for each chart:

vAxes: {
    0: {
        title:'График 1',
        textStyle: {color: '#21C40A'},
        minorGridlines: {count: 2, color: '#ccc'},
        titleTextStyle: {color: '#21C40A'},
    },
    1: {
        title:'График 2',
        textStyle: {color: '#E89712'},
        minorGridlines: {count: 2, color: '#ccc'},
        titleTextStyle: {color: '#E89712'}
    },
    2: {
        title:'График 3',
        textStyle: {color: '#390983'},
        minorGridlines: {count: 2, color: '#ccc'},
        titleTextStyle: {color: '#390983'}
    }
}

问题on是如何指定y坐标的位置，或者取彼此的距离，以便数据不会相互叠加？
我能以这种方式获得吗？

The question is how you can specify the position of the y coordinate or take the distance from each other so that the data does not stack on each other? Can I get it this way?

推荐答案

br>
set - > textPosition：'in'

，否则，

他们将始终堆叠在彼此之上...

this will move one inside the chart, otherwise,
they will always stack on top of each other...

请参阅以下工作片段，

也使用 chartArea.right 为标签和标题留出足够的空间...

see following working snippet,
also use chartArea.right to allow enough room for the labels and titles...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Month');
    data.addColumn('number', "Average Temperature");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average 1");
    data.addColumn('number',"Average 2")
    data.addRows([
      [new Date(2014, 0),  -.5,  8.7,7,11],
      [new Date(2014, 1),   .4,  8.7,5,12],
      [new Date(2014, 2),   .5,   12,6,13],
      [new Date(2014, 3),  2.9, 15.7,5,14],
      [new Date(2014, 4),  6.3, 18.6,8,15],
      [new Date(2014, 5),    9, 20.9,8,16],
      [new Date(2014, 6), 10.6, 19.8,9,16],
      [new Date(2014, 7), 10.3, 16.6,7,15],
      [new Date(2014, 8),  7.4, 13.3,8,14],
      [new Date(2014, 9),  4.4,  9.9,12,13],
      [new Date(2014, 10), 1.1,  6.6,11,12],
      [new Date(2014, 11), -.2,  4.5,11,11]
    ]);

    var classicOptions = {
      title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
      width: '100%',
      height: '100%',
      chartArea: {
        width: '100%',
        height: '100%',
        top: 72,
        left: 60,
        bottom: 48,
        right: 84
      },
      series: {
        0: {targetAxisIndex: 0},
        1: {targetAxisIndex: 1},
        2: {targetAxisIndex: 2}
      },
      vAxes: {
        0: {
          textPosition: 'out',
          title: 'Temps (Celsius)'
        },
        1: {
          textPosition: 'out',
          title: 'Daylight',
          viewWindow: {
            max: 30
          }
        },
        2: {
          textPosition: 'in',
          title: 'third',
          viewWindow: {
            max: 40
          }
        }
      },
      hAxis: {
        ticks: [
          new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
          new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
          new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
        ]
      },
    };

    var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
    classicChart.draw(data, classicOptions);
  },
  packages:['corechart']
});

html, body, div {
  height: 100%;
}

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

这篇关于Google图表vAxis的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！