Can Google Charts support dual y-axis (v-axis)?

前端 未结 3 777
离开以前
离开以前 2020-12-02 11:21

The Flot chart api supports dual v-axis scales, as shown by this example.

I\'m using Google Charts - is this possible also with Google? I\'ve had a look through the

3条回答
  •  温柔的废话
    2020-12-02 11:37

    It took me a while, to figure this out, but Google Charts does support dual Y-axis (v-axis). I want to use the Javascript API and not the HTML interface.

    This example can be tested here: http://code.google.com/apis/ajax/playground/?type=visualization#line_chart

    Replace all of that code with this code showing how to have two different Y-axis scales:

    function drawVisualization() {
      // Create and populate the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'x');
      data.addColumn('number', 'Cats');
      data.addColumn('number', 'Blanket 1');
      data.addColumn('number', 'Blanket 2');
      data.addRow(["A", 1, 1, 0.5]);
      data.addRow(["B", 2, 0.5, 1]);
      data.addRow(["C", 4, 1, 0.5]);
      data.addRow(["D", 8, 0.5, 1]);
      data.addRow(["E", 7, 1, 0.5]);
      data.addRow(["F", 7, 0.5, 1]);
      data.addRow(["G", 8, 1, 0.5]);
      data.addRow(["H", 4, 0.5, 1]);
      data.addRow(["I", 2, 1, 0.5]);
      data.addRow(["J", 3.5, 0.5, 1]);
      data.addRow(["K", 3, 1, 0.5]);
      data.addRow(["L", 3.5, 0.5, 1]);
      data.addRow(["M", 1, 1, 0.5]);
      data.addRow(["N", 1, 0.5, 1]);
    
    
      // Create and draw the visualization.
      new google.visualization.LineChart(document.getElementById('visualization')).
          draw(data, {curveType: "function", width: 500, height: 400,
        vAxes: {0: {logScale: false},
                1: {logScale: false, maxValue: 2}},
        series:{
           0:{targetAxisIndex:0},
           1:{targetAxisIndex:1},
           2:{targetAxisIndex:1}}}
              );
    }
    

    By adding maxValue: 2 to the code, and setting series 1 & 2 to that axis, they work properly on a second axis.

提交回复
热议问题