Гугл чарт нескольких серий с одинаковым масштабом - PullRequest
Новая
       8

Гугл чарт нескольких серий с одинаковым масштабом

0 голосов
/ 27 апреля 2018

Я ищу способ иметь несколько рядов на моей графике с одинаковыми масштабами, но отображаемыми только один раз.

как вы можете видеть здесь: http://jsfiddle.net/Youkoal/d3xwnqdu/ У меня есть 4 серии и на графике отображаются все 4 оси.

Я заметил, что эти свойства здесь не работают: 

TextStyle: {color: 'none'}

ни 

{format: 'none'}

при включении в параметры оси.

Как я могу «спрятать» эти оси или поместить все серии в одинаковые шкалы?

1 Ответ

0 голосов
/ 27 апреля 2018

первая буква в 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

...