Добавить область в линейную диаграмму - PullRequest
Новая
       3

Добавить область в линейную диаграмму

1 голос
/ 02 апреля 2020

Я пытаюсь построить линейный график, где оси X - это даты (см. эту ссылку ). 

var totalChartOptions = {
    chart : {title : 'Total cases'},
    curveType : 'function',
    legend : {position : 'none'},
    axes : {x : {0 : {side : 'top'}}},
    hAxis : {title : '', format : "dd/MM"},
    colors : [ 'orange', 'green', 'red' ],
    pointSize : 20,
    pointShape : 'diamond',
}

totalData.addColumn("date", "Date");
totalData.addColumn("number", "Confirmed");
totalData.addColumn("number", "Recovered");
totalData.addColumn("number", "Deaths");
... foreach (...)
        totalData.addRow([ date, confirmed, recovered, deaths, null ]);
... var chart = new google.charts.Line(totalElement);
chart.draw(totalData, google.charts.Line.convertOptions(vm.totalChartOptions));

Для "сегодня" я хотел бы добавить цветная область, чтобы показать, что данные еще не окончательны.

enter image description here.

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

1 Ответ

1 голос
/ 03 апреля 2020

Материал диаграммы не поддерживают комбинированные диаграммы,
, поэтому невозможно смешать линии и серии областей '

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

и Classi c диаграммы не имеют возможности представить ось X сверху.
однако мы можем вручную изменить диаграмму для события 'ready'.
, чтобы разрешить ее, мы используем диаграмму Classi c и вручную переместить метки оси X в верхнюю часть ,

используя ComboChart, мы можем добавить четвертую серию в качестве области. 

totalData.addColumn('date', 'Date');
totalData.addColumn('number', 'Confirmed');
totalData.addColumn('number', 'Recovered');
totalData.addColumn('number', 'Deaths');
totalData.addColumn('number', 'Today');  // <-- area series

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

seriesType: 'line',
series: {
  3: {
    type: 'area',
    color: 'yellow',
    pointSize: 0
  }
}

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

// calculate y-axis range
var range = {
  min: null,
  max: null
};
for (var i = 1; i < totalData.getNumberOfColumns(); i++) {
  var colRange = totalData.getColumnRange(i);
  range.min = Math.min(range.min, colRange.min);
  range.max = Math.max(range.max, colRange.max);
}

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

// add area series data
var colIndex = totalData.getNumberOfColumns() - 1;
totalData.setValue(totalData.getNumberOfRows() - 2, colIndex, range.max);
totalData.setValue(totalData.getNumberOfRows() - 1, colIndex, range.max);

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var totalData = new google.visualization.DataTable();
  totalData.addColumn('date', 'Date');
  totalData.addColumn('number', 'Confirmed');
  totalData.addColumn('number', 'Recovered');
  totalData.addColumn('number', 'Deaths');
  totalData.addColumn('number', 'Today');

  // simulate data
  totalData.addRow([new Date(2020, 2, 18), 1900, 0, 1, null]);
  totalData.addRow([new Date(2020, 2, 20), 1900, 0, 10, null]);
  totalData.addRow([new Date(2020, 2, 22), 4000, 2000, 100, null]);
  totalData.addRow([new Date(2020, 2, 24), 4000, 2000, 100, null]);
  totalData.addRow([new Date(2020, 2, 26), 2400, 0, 100, null]);
  totalData.addRow([new Date(2020, 2, 28), 3000, 1000, 110, null]);
  totalData.addRow([new Date(2020, 2, 30), 4000, 1000, 90, null]);
  totalData.addRow([new Date(2020, 3, 1), 4300, 5000, 20, null]);
  totalData.addRow([new Date(2020, 3, 3), 0, 0, 0, null]);
  totalData.addRow([new Date(2020, 3, 4), null, null, null, null]);

  // calculate y-axis range
  var range = {
    min: null,
    max: null
  };
  for (var i = 1; i < totalData.getNumberOfColumns(); i++) {
    var colRange = totalData.getColumnRange(i);
    range.min = Math.min(range.min, colRange.min);
    range.max = Math.max(range.max, colRange.max);
  }

  // add area series data
  var colIndex = totalData.getNumberOfColumns() - 1;
  totalData.setValue(totalData.getNumberOfRows() - 2, colIndex, range.max);
  totalData.setValue(totalData.getNumberOfRows() - 1, colIndex, range.max);

  var totalChartOptions = {
    chartArea: {
      top: 60
    },
    title : 'Total cases',
    curveType: 'function',
    legend: {position : 'none'},
    hAxis: {title : '', format : 'dd/MM'},
    colors: ['orange', 'green', 'red', 'yellow'],
    pointSize: 20,
    pointShape: 'diamond',
    vAxis: {
      viewWindow: range
    },
    seriesType: 'line',
    series: {
      3: {
        type: 'area',
        color: 'yellow',
        pointSize: 0
      }
    },
    theme: 'material'
  }

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

  // move x-axis to top
  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var labels = chart.getContainer().getElementsByTagName('text');
    var fontSize;
    var yCoord;
    Array.prototype.forEach.call(labels, function(label) {
      fontSize = parseFloat(label.getAttribute('font-size'));
      switch (label.getAttribute('text-anchor')) {
        // chart title
        case 'start':
          yCoord = parseFloat(label.getAttribute('y'));
          label.setAttribute('y', yCoord - fontSize);
          break;

        // x-axis labels
        case 'middle':
          label.setAttribute('y', chartBounds.top - (fontSize / 2));
          break;

        // y-axis labels
        default:
          // ignore
      }
    });
  });

  chart.draw(totalData, totalChartOptions);
});
#chart_div {
  height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...