Горизонтальная полоса Google Visualization Chart с целью (вертикальная линия - PullRequest
Новая
       3

Горизонтальная полоса Google Visualization Chart с целью (вертикальная линия

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

Я хотел бы настроить небольшую и легкую диаграмму, используя диаграмму Google Visualizion.

Идея состоит в том, чтобы иметь горизонтальную гистограмму (это я знаю, как это сделать), НО в сочетании с вертикальной линией, показывающей если цель превышена или нет. Цель может быть разной для каждого из данных.

Кроме того, я хотел бы включить индикатор (красный / зеленый), легко идентифицирующий, кто находится под целью, а кто выше (+ опционально метка сразу после зеленого / красного) точка).

enter image description here

Есть идеи, как поступить?

1 Ответ

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

на самом деле, вы можете просто использовать BarChart,
и изменить тип серии для последних двух столбцов ... 

series: {
  1: {
    type: 'line'
  },
  2: {
    type: 'scatter'
  }
}

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'x'});
  dataTable.addColumn({type: 'number', id: 'bar'});
  dataTable.addColumn({type: 'string', role: 'annotation'});
  dataTable.addColumn({type: 'number', id: 'line'});
  dataTable.addColumn({type: 'number', id: 'scatter'});
  dataTable.addColumn({type: 'string', role: 'style'});
  dataTable.addRows([
    ['', 300, '300', 300, 800, '#4caf50'],
    ['', 600, '600', 600, 800, '#f44336'],
    ['', 200, '200', 200, 800, '#4caf50'],
    ['', 150, '150', 150, 800, '#f44336'],
  ]);

  var options = {
    annotations: {
      alwaysOutside: true,
      textStyle: {
        color: '#000000'
      }
    },
    colors: ['#9e9e9e', '#2196f3'],
    legend: 'none',
    hAxis: {
      gridlines: {
        count: 0
      },
      textPosition: 'none'
    },
    series: {
      1: {
        lineWidth: 4,
        type: 'line'
      },
      2: {
        type: 'scatter'
      }
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart'));
  chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

РЕДАКТИРОВАТЬ

для добавления пользовательских меток рядом с точками рассеяния,
вы можете использовать метод диаграммы - -> getChartLayoutInterface()

, у которого есть метод для -> getBoundingBox(id)
, который можно использовать для поиска позиции элемента диаграммы.
где id - идентификатор строки точка, в этом формате -> point#series#row - point#0#0

на событии 'ready' графика, мы можем расположить пользовательские метки рядом с точками. 

google.visualization.events.addListener(chart, 'ready', function (sender) {
  var padding = 16;
  var chartLayout = chart.getChartLayoutInterface();
  var containerBounds = chart.getContainer().getBoundingClientRect();

  for (var row = 0; row < dataTable.getNumberOfRows(); row++) {
    var pointBounds = chartLayout.getBoundingBox('point#2#' + row);
    var dataLabel = document.createElement('span');
    dataLabel.className = 'data-label';
    dataLabel.innerHTML = 'Label ' + row;
    dataLabel.style.top = (containerBounds.top + pointBounds.top - (pointBounds.height / 2)) + 'px';
    dataLabel.style.left = (containerBounds.left + pointBounds.left + pointBounds.width + padding) + 'px';
    chart.getContainer().appendChild(dataLabel);
  }
});

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'x'});
  dataTable.addColumn({type: 'number', id: 'bar'});
  dataTable.addColumn({type: 'string', role: 'annotation'});
  dataTable.addColumn({type: 'number', id: 'line'});
  dataTable.addColumn({type: 'number', id: 'scatter'});
  dataTable.addColumn({type: 'string', role: 'style'});
  dataTable.addRows([
    ['', 300, '300', 300, 800, '#4caf50'],
    ['', 600, '600', 600, 800, '#f44336'],
    ['', 200, '200', 200, 800, '#4caf50'],
    ['', 150, '150', 150, 800, '#f44336'],
  ]);

  var options = {
    annotations: {
      alwaysOutside: true,
      textStyle: {
        color: '#000000'
      }
    },
    colors: ['#9e9e9e', '#2196f3'],
    legend: 'none',
    hAxis: {
      gridlines: {
        count: 0
      },
      textPosition: 'none'
    },
    series: {
      1: {
        lineWidth: 4,
        type: 'line'
      },
      2: {
        type: 'scatter'
      }
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function (sender) {
    var padding = 16;
    var chartLayout = chart.getChartLayoutInterface();
    var containerBounds = chart.getContainer().getBoundingClientRect();

    for (var row = 0; row < dataTable.getNumberOfRows(); row++) {
      var pointBounds = chartLayout.getBoundingBox('point#2#' + row);
      var dataLabel = document.createElement('span');
      dataLabel.className = 'data-label';
      dataLabel.innerHTML = 'Label ' + row;
      dataLabel.style.top = (containerBounds.top + pointBounds.top - (pointBounds.height / 2)) + 'px';
      dataLabel.style.left = (containerBounds.left + pointBounds.left + pointBounds.width + padding) + 'px';
      chart.getContainer().appendChild(dataLabel);
    }
  });

  chart.draw(dataTable, options);
});
.data-label {
  position: absolute;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
...