如何在谷歌图表中放置多个 Vaxis(y)？

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: ...} ）

如果要将相同的值应用于所有 y 轴，请使用vAxis

要设置单个 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>