Параметры отображения Google Charts - PullRequest
Новая
       8

Параметры отображения Google Charts

0 голосов
/ 06 сентября 2018

Мои вопросы (короткий стиль)

  • Можете ли вы настроить интервал надписей по оси Y?
  • Можно ли отобразить экстремальные значения ряда в виде горизонтальной линии?

Подробные объяснения

У меня есть комбинированная диаграмма, созданная с помощью Google Charts: первый набор данных использует стиль области, а второй - стиль линии. Здесь важен второй:

  • представляет процент
  • я не хочу, чтобы он был от 0 до 1 (или от 0 до 100 в процентах), но от его минимума до максимума (или что-то около)
  • и я хочу отобразить эти минимальные и максимальные значения

Если я изменю шкалу так:

PHP 

$min_reject_percentage = 5 * floor($min_reject_percentage / 5);
$max_reject_percentage = 5 * ceil($max_reject_percentage / 5);

JS 

var options = {
    ...
    vAxes: {
        ...
        1: {
            format:"##%",
            viewWindow: {
                min: <?php echo ($min_taux_rejet / 100); ?>,
                max: <?php echo ($max_taux_rejet / 100); ?>,
            },
        },
    },
    series: {
        0: {
            targetAxisIndex: 0,
            type: 'area',
        },
        1: {
            targetAxisIndex: 1,
            type: 'line',
        },
    }
}

Вертикальная ось ограничена ближайшим кратным 5 для минимального и максимального значений, но:

  • интервал, показанный на оси, составляет от 10 до 10, что является слишком большим. Так как у меня реальный максимум 31,5, а реальный минимум 17,1, ось min равна 15, это 15, а ось max составляет 35, но помечены только градации 20 и 30.
  • я не вижу реальных минимальных и максимальных значений на графике

1 Ответ

0 голосов
/ 06 сентября 2018

вы можете использовать опцию конфигурации ticks, которая является массивом значений, которые будут использоваться для меток ...

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1'],
    [0, 18, 0.171],
    [1, 28, 0.315],
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  var axisMin = 0.15;
  var axisMax = 0.35;
  var ticks = [];
  for (var i = axisMin; i <= axisMax; i = i + 0.05) {
    ticks.push(i);
  }

  var options = {
    vAxes: {
      1: {
        format: '##%',
        ticks: ticks,
        viewWindow: {
          min: axisMin,
          max: axisMax,
        },
      },
    },
    series: {
      0: {
        targetAxisIndex: 0,
        type: 'area',
      },
      1: {
        targetAxisIndex: 1,
        type: 'line',
      },
    }
  };

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...