Могу ли я создать диаграмму области, границы которой определены между двумя линиями с помощью библиотеки Google Charts? - PullRequest
Новая
       30

Могу ли я создать диаграмму области, границы которой определены между двумя линиями с помощью библиотеки Google Charts?

0 голосов
/ 10 декабря 2018

Мне нужно реализовать следующую диаграмму, и сейчас мы используем библиотеку Google Chart, и самая близкая диаграмма, которую я нахожу, это Area Chart .Проблема в том, что диаграмма площади определяет область между осью X и линией.В моем случае мне нужно определить область между 2 строками.Можно ли это сделать с помощью библиотеки Google Chart?

enter image description here

Спасибо.

1 Ответ

0 голосов
/ 10 декабря 2018

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

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [1, 115],
    [2, 116],
    [3, 117],
    [4, 118],
    [5, 119],
    [6, 125],
    [7, 135],
    [8, 145],
    [9, 142],
    [10, 140],
    [11, 136],
    [12, 128],
    [13, 120],
    [14, 118],
    [15, 117],
    [16, 116],
    [17, 112],
    [18, 110],
    [19, 110],
    [20, 109],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return dt.getValue(row, 1) - 60;
    },
    type: 'number',
    label: 'bottom'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 1);
    },
    type: 'number',
    label: 'top'
  }]);

  var options = {
    colors: ['blue', 'transparent', 'blue'],
    lineWidth: 0,
    height: 400,
    isStacked: true,
    series: {
      0: {
        lineWidth: 1,
        pointSize: 4,
        type: 'line'
      },
      1: {
        enableInteractivity: false,
        visibleInLegend: false
      },
      2: {
        enableInteractivity: false,
        visibleInLegend: false
      }
    }
  };

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