谷歌图表具有相同规模的多个系列

问题描述 投票:1回答:1

我正在寻找一种方法,在我的图形上有多个系列,具有相同的比例,但只显示一次。

正如你在这里看到的:http://jsfiddle.net/Youkoal/d3xwnqdu/我有4个séries,图表显示所有4轴。

我注意到这个属性似乎不适用于此:

TextStyle: {color: 'none'}

也不

{format: 'none'}

当包含在轴选项中时。

如何“隐藏”这些轴或将所有系列放在相同的比例尺上?

javascript charts google-visualization
1个回答
0
投票

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

    textStyle: {
      color: 'none'
    }

这将隐藏文本,但图表仍将为标签分配空间, 最小化,减少fontSize ...

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

理想情况下,我们可以使用textPosition: 'none',但材料图表不支持此选项。 Tracking Issue for Material Chart Feature Parity

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

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声明,见上面的片段...

2)您可以使用选项vAxis来设置所有vAxes的比例

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

© www.soinside.com 2019 - 2024. All rights reserved.