Google chart multiple series with same scale

问题

I'm looking for a way to have multiple series on my graphics, with the same scales but displayed only once.

as you can see here : http://jsfiddle.net/Youkoal/d3xwnqdu/ I have 4 séries and the chart display all 4 axis.

I have noted that this properties do not seem to work here:

TextStyle: {color: 'none'}

nor

{format: 'none'}

when included in the axis options.

How can I 'hide' those axis or put all series on same scales?

回答1:

the first letter in textStyle should be lowercase...

    textStyle: {
      color: 'none'
    }

this will hide the text, but the chart will still allocate room for the labels,
to minimize, reduce the fontSize...

    textStyle: {
      color: 'none',
      fontSize: 1
    }

ideally we could use textPosition: 'none', but this option is not supported for material charts.
Tracking Issue for Material Chart Feature Parity

see following working snippet...

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Semaines', 'Test Region', 'Test2 Region', 'Test SerieNE', 'Test2 SerieNE', 'Test SerieS', 'Test2 SerieS', 'Test SerieO', 'Test2 SerieO'],
    ['Semaine 1', 0, 0, 0, 0, 0, 0, 0, 0],
    ['Semaine 2', 0, 0, 0, 0, 0, 0, 0, 0],
    ['Semaine 3', 0, 0, 0, 0, 0, 0, 0, 0],
    ['Semaine 4', 24, 0, 21, 0, 0, 0, 3, 0],
    ['Semaine 5', 122, 0, 21, 0, 52, 0, 49, 0],
    ['Semaine 6', 361, 0, 23, 0, 325, 0, 13, 0],
    ['Semaine 7', 51, 0, 21, 0, 11, 0, 19, 0],
    ['Semaine 8', 81, 3, 3, 0, 64, 3, 14, 0],
    ['Semaine 9', 711, 22, 81, 3, 527, 9, 103, 10],
    ['Semaine 10', 139, 13, 26, 5, 104, 5, 9, 3],
    ['Semaine 11', 255, 12, 139, 2, 33, 4, 83, 6],
    ['Semaine 12', 256, 10, 23, 4, 15, 5, 218, 1],
    ['Semaine 13', 145, 26, 84, 7, 58, 16, 3, 3],
    ['Semaine 14', 112, 15, 51, 0, 34, 11, 27, 4],
    ['Semaine 15', 122, 27, 29, 8, 53, 14, 40, 5],
    ['Semaine 16', 98, 18, 17, 6, 31, 7, 50, 5],
    ['Semaine 17', 87, 21, 12, 6, 37, 3, 38, 12],
  ]);

  var options = {
    chart: {
      title: 'Suivis hebdo',
      subtitle: 'Pilotage',
    },
    bars: 'vertical',
    isStacked: true,
    height: 600,
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      },
      4: {
        targetAxisIndex: 2
      },
      5: {
        targetAxisIndex: 2
      },
      6: {
        targetAxisIndex: 3
      },
      7: {
        targetAxisIndex: 3
      }
    },
    vAxis: {
      format: 'decimal',
      viewWindow: {
        min: 0,
        max: 1000
      }
    },
    vAxes: {
      1: {
        textStyle: {
          color: 'none',
          fontSize: 1
        }
      },
      2: {
        textStyle: {
          color: 'none',
          fontSize: 1
        }
      },
      3: {
        textStyle: {
          color: 'none',
          fontSize: 1
        }
      }
    },
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
});

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

notes:

1) need to use the correct library, jsapi should no longer be used, instead use loader.js
this will only change the load statement, see above snippet...

2) you can use option vAxis to set the scale for all vAxes

3) it isn't necessary to move the first series to another targetAxisIndex

来源：https://stackoverflow.com/questions/50059447/google-chart-multiple-series-with-same-scale

标签

javascript

charts

google-visualization