在谷歌折线图中绘制日期范围栏 [英] Draw date range bar in google line chart

问题描述

我试图在行后面绘制谷歌折线图并结合一些矩形形状来表示影响行为行为的日期范围事件。

我正在使用谷歌图表和

解决方案

使用 ComboChart 与区域系列绘制矩形形状

将区域系列的值设置为y轴的最大值，使用<$ c $

c> null in t他的数据行不重合...

---

请参阅以下工作片段...

]}）; function drawChart（）{var dataTable = new google.visualization.DataTable（{cols：[{id：'x'，label：'Date'，type：'date'}，{id：'y'， label：'Fn'，键入：'number'}，{id：'z'，label：'Shade'，type：'number'}]}）; var formatDate = new google.visualization.DateFormat（{pattern：'MMM-dd-yyyy'}）; var oneDay =（1000 * 60 * 60 * 24）; var startDate = new Date（2016，10，27）; var endDate = new Date（）; var ticksAxisH = []; var dateRanges = [{start：new Date（2017，0，1），end：new Date（2017，0，20）}，{start：new Date（2017，1，5），end：new Date（2017， 1，10）}]; var maxShade = 200; for（var i = startDate.getTime（）; i< endDate.getTime（）; i = i + oneDay）{// x = date var rowDate = new Date（i）; var xValue = {v：rowDate，f：formatDate.formatValue（rowDate）}; // y = 2x + 8 var yValue =（2 *（（i - startDate.getTime（））/ oneDay）+ 8）; // z = null或max shade var zValue = null; dateRanges.forEach（function（range）{if（（rowDate.getTime（）> = range.start.getTime（））&&（rowDate.getTime（）< = range.end.getTime（））） {zValue = maxShade;}}）; //添加数据行dataTable.addRow（[xValue，yValue，zValue]）; //（如果（（ - 我 - startDate.getTime（））％7）=== 0）{ticksAxisH.push（xValue）; }} var container = document.getElementById（'chart_div'）; var chart = new google.visualization.ChartWrapper（{chartType：'ComboChart'，dataTable：dataTable，options：{chartArea：{bottom：64，top：48}，hAxis：{slantedText：true，ticks：ticksAxisH}，legend： {position：'top'}，lineWidth：4，series：{// line 0：{color：'＃00acc1'}，// area 1：{areaOpacity：0.6，color：'＃ffe0b2'，type：'area '，visibleInLegend：false}，}，seriesType：'line'}}）; chart.draw（container）;}

< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart_div>< / div>

I am trying to draw google line chart combined with some rectangle shapes in back of the line to represent date range events that affects the line behavior.

I am using google charts and angular-google-charts library

Do you have any idea how I can get this on google charts?

解决方案

use a ComboChart with an area series to draw rectangle shapes

set the value of the area series to the max value of the y-axis,

use null in the data where the rows do not coincide...

---

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {id: 'x', label: 'Date', type: 'date'},
      {id: 'y', label: 'Fn', type: 'number'},
      {id: 'z', label: 'Shade', type: 'number'}
    ]
  });

  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM-dd-yyyy'
  });

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2016, 10, 27);
  var endDate = new Date();
  var ticksAxisH = [];
  var dateRanges = [
    {start: new Date(2017, 0, 1), end: new Date(2017, 0, 20)},
    {start: new Date(2017, 1, 5), end: new Date(2017, 1, 10)}
  ];
  var maxShade = 200;
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    // x = date
    var rowDate = new Date(i);
    var xValue = {
      v: rowDate,
      f: formatDate.formatValue(rowDate)
    };

    // y = 2x + 8
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);

    // z = null or max shade
    var zValue = null;
    dateRanges.forEach(function (range) {
      if ((rowDate.getTime() >= range.start.getTime()) &&
          (rowDate.getTime() <= range.end.getTime())) {
        zValue = maxShade;
      }
    });

    // add data row
    dataTable.addRow([
      xValue,
      yValue,
      zValue
    ]);

    // add tick every 7 days
    if (((i - startDate.getTime()) % 7) === 0) {
      ticksAxisH.push(xValue);
    }
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    dataTable: dataTable,
    options: {
      chartArea: {
        bottom: 64,
        top: 48
      },
      hAxis: {
        slantedText: true,
        ticks: ticksAxisH
      },
      legend: {
        position: 'top'
      },
      lineWidth: 4,
      series: {
        // line
        0: {
          color: '#00acc1'
        },
        // area
        1: {
          areaOpacity: 0.6,
          color: '#ffe0b2',
          type: 'area',
          visibleInLegend: false
        },
      },
      seriesType: 'line'
    }
  });

  chart.draw(container);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

这篇关于在谷歌折线图中绘制日期范围栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！