Google用相同的比例绘制多个系列的图表 [英] 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.

在这里可以看到：
http://jsfiddle.net/Youkoal/d3xwnqdu/
我有4个序列和图表显示所有4轴。

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'}

{format: 'none'}

当包含在轴选项中时。

如何隐藏那些轴或将所有系列置于相同的比例尺上？ p>

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

推荐答案

textStyle 中的第一个字母应该是小写...

the first letter in textStyle should be lowercase...

    textStyle: {
      color: 'none'
    }

这将隐藏文本，但图表仍会为标签分配空间，

以最小化，减小 fontSize ...

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
    }

理想情况下，我们可以使用 textPosition：'none'，但是 material 图表不支持此选项。

物料图特征奇偶校验的跟踪问题

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>

注意：

1）需要使用正确的库， jsapi 应该不再使用，而应使用 loader.js

这只会更改 load 语句，请参见上面的片段...

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），您可以使用选项 vAxis 设置所有 vAxes

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

3）没有必要将第一个系列移到另一个 targetAxisIndex

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

这篇关于Google用相同的比例绘制多个系列的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！