如何把多个Vaxis(y)放在google图表中？

Question

我做了2条线的线图，每5秒更新一次。

我想让它有双VAxis在左和右的大小。

但是，我看不到vAxis的标题......我怎么能把它？

我添加了我的图表选项。

这个图表从servlet获取数据，并打印出计数。

并请告诉我，如果我可以简单地修复代码。

谢谢你。

var chartOption1 = function(target, name, namename){
        var d=new Date();
        this.name = name;
        this.name2=namename;
        this.target = target;
        this.data = null;
        this.chart = null;
        this.options = {
          title:d.getFullYear()+'년 '+(1+d.getMonth())+'월 '+d.getDate()+'일 '+'금일 누적 Flow 유입 개수',
          legend: { position: 'top' },
          titleTextStyle:{
                fontSize: 20,
                bold: true
            },
            series:{
                0:{targetAxisIndex:0},
                1:{targetAxisIndex:1}

            },
          vAxis:  {0:{precision:0, baseline:0, title:'Normal Flow 개수', minValue:0, maxValue:100, format:'0'},
                   1:{precision:0, baseline:0, title:'Anomaly Flow 개수', minValue:0, maxValue:100, format:'0'}
          },
          hAxis: {
              title:'기준 시간',
            textStyle: {
              fontSize: 11
            }
          },
          colors: ['#1cc88a', '#e74a3b'],
          animation: {
            duration: 500,
            easing: 'in',
            startup: true
          }
        }

    }
      var new_option1 = new chartOption1('chart','Normal Flow', 'Anomaly Flow');


      function drawChart1(option1) {
        var o1 = option1;
        if(o1 != null){
          //초기값일때만 처리
          if(o1.chart == null || o1.data == null){
            o1.data = new google.visualization.DataTable();
            o1.data.addColumn('string', 'time');
            o1.data.addColumn('number', o1.name);
            o1.data.addColumn('number', o1.name2);
            o1.data.addRow(['', 0, 0]);
            o1.chart = new google.visualization.ColumnChart(document.getElementById("in_flow_daily"));
          }
          o1.chart.draw(o1.data, o1.options);
        }
      }

      function animateRenewal1(option1){
        var o1 = option1;
        if (o1.data.getNumberOfRows() >= 8) {
          o1.data.removeRow(0);
        }

        var value1 = $.ajax({
            type:'POST',
            url:"/Flow_servlet/normalflow_count_daily.do",
            data: {
                now :getNowTime1(),
                nowend:getNowTimeend1()

            },
            cache:false,
            async:false
        }).responseText;

        var value1value1 = $.ajax({
            type:'POST',
            url:"/Flow_servlet/anomalyflow_count_daily.do",
            data: {
                now :getNowTime1(),
                nowend:getNowTimeend1()

            },
            cache:false,
            async:false
        }).responseText;

        value1=parseInt(value1);
        value1value1=parseInt(value1value1);
        o1.data.insertRows(o1.data.getNumberOfRows(), [[getNowOnlyTime1(), value1, value1value1]]);
        drawChart1(o1);
        window.addEventListener('resize', o1, false);
      }

      setInterval(function(){ //50초당 실행
        animateRenewal1(new_option1);
        drawChart3();
        drawChart2();
        drawChart4();
      }, 5000);

Answer 1

只是需要改变正在使用的y轴选项。

把--> vAxis

改为--> vAxes

(用 e)

vAxis 格式化所有Y轴，并且没有索引键({0: ..., 1: ...})

使用 vAxis 如果您想将相同的值应用于所有的Y轴

样式的Y轴，使用 vAxes

请看下面的工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'Normal Flow');
  data.addColumn('number', 'Anomaly Flow');
  data.addRow(['11.21.55', 12, 10]);
  data.addRow(['11.22.0', 12, 10]);
  data.addRow(['11.22.5', 12, 10]);

  var d = new Date();

  var options = {
    title: d.getFullYear()+'년 '+(1+d.getMonth())+'월 '+d.getDate()+'일 '+'금일 누적 Flow 유입 개수',
    legend: {
      position: 'top'
    },
    titleTextStyle:{
      fontSize: 20,
      bold: true
    },
    series:{
      0:{targetAxisIndex:0},
      1:{targetAxisIndex:1}
    },
    vAxis:  {precision:0, baseline:0, minValue:0, maxValue:100, format:'0'},
    vAxes:  {
      0: {title:'Normal Flow 개수'},
      1: {title:'Anomaly Flow 개수'}
    },
    hAxis: {
      title:'기준 시간',
      textStyle: {
        fontSize: 11
      }
    },
    colors: ['#1cc88a', '#e74a3b'],
    animation: {
      duration: 500,
      easing: 'in',
      startup: true
    }
  };

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

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart_div {
  height: 100%;
}

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