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

时间:2018-04-27 09:33:25

标签: javascript charts google-visualization

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

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

我注意到这些属性似乎不起作用:

TextStyle: {color: 'none'}

,也不

{format: 'none'}

包含在轴选项中。

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

1 个答案:

答案 0 :(得分: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