Как мне показать горизонтальную контрольную линию в столбце Google? - PullRequest
Новая
       32

Как мне показать горизонтальную контрольную линию в столбце Google?

1 голос
/ 20 января 2020

Подобный вопрос был задан ранее здесь: Google Charts: Горизонтальная эталонная линия на диаграмме

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

У меня есть столбец диаграммы Google диаграммы с данными, отображаемыми в различных столбцах. Я хотел бы добавить горизонтальную контрольную линию, чтобы указать конкретное пороговое значение на оси Y. Я знаю, что можно создать что-то похожее на то, что я хочу, используя Google Combochart, чтобы отображать и столбцы, и линии на одном графике. Однако с помощью этого метода контрольная линия проходит только между центром первого и последнего столбца, а не полностью по всей диаграмме.

По сути, я хочу выделить определенное значение на оси y с помощью линия проходит через весь график

1 Ответ

0 голосов
/ 21 января 2020

Вы можете использовать непрерывную ось X (цифры),
с нулевыми значениями слева и справа. 

['Category', 'Value', 'Reference'],
[0, null, 0.80],
[1, 0.10, 0.80],
[2, 0.30, 0.80],
[3, 0.20, 0.80],
[4, null, 0.80]

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

hAxis: {
  ticks: [{v: 1, f: 'Quant'}, {v: 2, f: 'Verbal'}, {v: 3, f: 'Total'}],
  viewWindow: {
    min: 0.5,
    max: 3.5
  }
},

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Category', 'Value', 'Reference'],
    [0, null, 0.80],
    [1, 0.10, 0.80],
    [2, 0.30, 0.80],
    [3, 0.20, 0.80],
    [4, null, 0.80]
  ]);

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);
  chart.draw(data, {
    colors: ['lime', 'magenta'],
    hAxis: {
      ticks: [{v: 1, f: 'Quant'}, {v: 2, f: 'Verbal'}, {v: 3, f: 'Total'}],
      viewWindow: {
        min: 0.5,
        max: 3.5
      }
    },
    legend: 'none',
    series: {
      1: {
        type: 'line'
      }
    },
    title: 'Percentile Score',
    vAxis: {
      format: 'percent',
      viewWindow: {
        min: 0,
        max: 1
      }
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...