구글 라인 차트의 날짜 범위 막대 그리기

Question

라인 동작에 영향을 미치는 날짜 범위 이벤트를 나타 내기 위해 라인 뒤쪽의 사각형 모양과 결합 된 Google 라인 차트를 그리려합니다.

나는 구글 차트와

angular-google-charts 라이브러리를 사용하고 당신은 내가 구글 차트에이를 얻을 수있는 방법 어떤 생각을 가지고 있습니까?

Answer 1

는

은 Y 축의 최대 값 영역 일련의 값을 설정 ComboChart영역 시리즈 그릴 직사각형 형상을 가진,

사용

행이 일치하지 않는 데이터에 null을 사용하십시오 ...

---

쉐이딩 등의 영역 시리즈,

... 작업 조각을 이어 ComboChart를 사용하는

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>