Google图表 - 设置最多一列

时间:2017-02-27 11:01:52

标签: google-visualization

是否可以在"材料柱形图中设置一个条形上的maxValue"

例如,在系列或轴上。

我试过了:

vAxis: {  
  viewWindow: { max: [100] },
  format: '000'
}

但它会更改所有列

1 个答案:

答案 0 :(得分:0)

您需要在单独的轴上隔离条

使用series选项进行分配,使用vAxes进行特定设置...

  series: {
    0: {
        targetAxisIndex: 0
    },
    1: {
        targetAxisIndex: 1
    }
  },
  vAxes: {
    0: {
      viewWindow: {
        max: 120
      },
      format: '000'
    },
    1: {
      viewWindow: {
        max: 100
      },
      format: '000'
    }
  }

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



google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'y0');
    data.addColumn('number', 'y1');
    data.addRows([
      [0, 96, 80.8],
      [1, 97, 80.8],
      [2, 98, 69.5],
      [3, 99, 57],
      [4, 100, 18.8],
      [5, 101, 17.6],
      [6, 102, 13.6],
      [7, 103, 12.3],
      [8, 104, 29.2],
      [9, 105, 42.9]
    ]);

    var options = {
      height: 500,
      series: {
        0: {
            targetAxisIndex: 0
        },
        1: {
            targetAxisIndex: 1
        }
      },
      vAxes: {
        0: {
          viewWindow: {
            max: 120
          },
          format: '000'
        },
        1: {
          viewWindow: {
            max: 100
          },
          format: '000'
        }
      }
    };

    var chart = new google.charts.Line(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Line.convertOptions(options));
  },
  packages: ['line']
});

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

注意:必须使用google.charts.Line.convertOptions才能获得所需的结果...