时间戳

首页 > 解决方案 > 谷歌图表具有相同比例的多个系列

javascript - 谷歌图表具有相同比例的多个系列

问题描述

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

正如您在这里看到的：http: //jsfiddle.net/Youkoal/d3xwnqdu/ 我有 4 个系列，图表显示所有 4 个轴。

我注意到这个属性在这里似乎不起作用：

TextStyle: {color: 'none'}

也不

{format: 'none'}

当包含在轴选项中时。

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

标签： javascriptchartsgoogle-visualization

解决方案

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

    textStyle: {
      color: 'none'
    }

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

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

理想情况下，我们可以使用，但材料图表textPosition: 'none'不支持此选项。物料图表特征奇偶校验的跟踪问题

请参阅以下工作片段... 

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

推荐阅读