Диаграмма - диаграмма Google с фильтром по времени - PullRequest
Новая
       8

Диаграмма - диаграмма Google с фильтром по времени

0 голосов
/ 04 июля 2018

Я хочу создать линейный график, который представляет несколько действий с накопленным значением для дней в промежутке времени этого действия.

На этом рисунке будет фильтр, который будет фильтровать по дням / неделям / месяцам.

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

Итак, я установил столбец даты на дату, и он решает проблему, не дублируя точки, проблема в том, что я применяю фильтр к неделям и месяцам, которые будут записываться как «неделя 24» или название месяца и Возврат двойных баллов.

Любое предложение.

Пример - 

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<button onclick="filter('DD-M')">day</button>
<button onclick="filter('W')">week</button>
<button onclick="filter('MMM')">month</button>

<script>

let data = [
      ['2018-06-01', 1, null],
      ['2018-06-02', 2, null],
      ['2018-06-03', 3, null],
      ['2018-06-04', 4, null],
      ['2018-06-05', 5, null],
      ['2018-06-06', 6, null],
      ['2018-06-07', 7, null],
      ['2018-06-08', 8, null],
      ['2018-06-09', 9, null],
      ['2018-06-06', null, 20],
      ['2018-06-07', null, 30],
      ['2018-06-08', null, 40],
      ['2018-06-09', null, 50],
      ['2018-06-10', null, 60],
      ['2018-06-11', null, 70],
      ['2018-06-12', null, 80],
      ['2018-06-13', null, 90],
      ['2018-06-14', null, 100]
];


let dataChart = [];

function filter (format) {
  dataChart = [];
  let lastDate = '';
  let value = 0;
	[].forEach.call(data, (d,i) => {
   
    let date = moment(d[0], 'YYYY-MM-DD').format(format);
    
     if (i === 0)
        lastDate = date;

    if (lastDate === date) { 
    	value += (d[1] !== null) ? d[1] : d[2];
    } else {
       dataChart.push([date, d[1], d[2]]);
       lastDate = date;
       value = (d[1] !== null) ? d[1] : d[2];
    }
    
     if ( i === data.length - 1) dataChart.push([date, d[1], d[2]]);
  	
  }); 
  
  google.charts.load('current', { packages: ['corechart'] });
	google.charts.setOnLoadCallback(drawChart);
}



filter('DD-M');







function drawChart() {
	var chart = new google.visualization.DataTable();
  chart.addColumn('string', 'date');
  chart.addColumn('number', 'action1');
  chart.addColumn('number', 'action2');
  chart.addRows(dataChart)
  
  let container = document.getElementById('chart_div');
	let dChart = new google.visualization.LineChart(container);
  dChart.draw(chart);
}




</script>

1 Ответ

0 голосов
/ 09 июля 2018

Проблемы

"... и если у вас есть только одно действие, но если у вас более одного и оно начинается одновременно, оно дублирует те точки, которые не должны были быть."

Решения

Массив data

Массив данных имел дублированные даты, поэтому дублированные точки неизбежны.

Сравните исходные значения ... 

let data = [
      ['2018-06-01', 1, null],
      ['2018-06-02', 2, null],
      ['2018-06-03', 3, null],
      ['2018-06-04', 4, null],
      ['2018-06-05', 5, null],
      ['2018-06-06', 6, null],// Duplicated Pair A
      ['2018-06-07', 7, null],// Duplicated Pair B
      ['2018-06-08', 8, null],// Duplicated Pair C
      ['2018-06-09', 9, null],// Duplicated Pair D
      ['2018-06-06', null, 20],// Duplicated Pair A
      ['2018-06-07', null, 30],// Duplicated Pair B
      ['2018-06-08', null, 40],// Duplicated Pair C
      ['2018-06-09', null, 50],// Duplicated Pair D
      ['2018-06-10', null, 60],
      ['2018-06-11', null, 70],
      ['2018-06-12', null, 80],
      ['2018-06-13', null, 90],
      ['2018-06-14', null, 100]
];

... до исправленных значений 

  let data = [
    ['2018-06-01', 1, null],
    ['2018-06-02', 2, null],
    ['2018-06-03', 3, null],
    ['2018-06-04', 4, null],
    ['2018-06-05', 5, null],
    ['2018-06-06', 6, 20],
    ['2018-06-07', 7, 30],
    ['2018-06-08', 8, 40],
    ['2018-06-09', 9, 50],
    ['2018-06-10', null, 60],
    ['2018-06-11', null, 70],
    ['2018-06-12', null, 80],
    ['2018-06-13', null, 90],
    ['2018-06-14', null, 100]
  ];

Один раз .length

Следующее условие: 

if (i === data.length - 1) dataChart.push([date, d[1], d[2]]);

создает дубликат дня в конце haxis (х или горизонтальная ось), в котором оба последних столбца: 14-6.

Чтобы исправить дублирование столбца, удалите -1 из .length: 

if (i === data.length) dataChart.push([date, d[1], d[2]]);

Один раз date

Следующее условие: 

 if (lastDate === date) {

заставляет haxis пропустить первый столбец, поэтому он начинается с 02-6 вместо 01-6:

Чтобы добавить отсутствующий первый столбец, добавьте -1 к значению date: 

  if (lastDate === date-1) {

Демо 

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<button onclick="filter('DD-M')">day</button>
<button onclick="filter('W')">week</button>
<button onclick="filter('MMM')">month</button>

<script>
  let data = [
    ['2018-06-01', 1, null],
    ['2018-06-02', 2, null],
    ['2018-06-03', 3, null],
    ['2018-06-04', 4, null],
    ['2018-06-05', 5, null],
    ['2018-06-06', 6, 20],
    ['2018-06-07', 7, 30],
    ['2018-06-08', 8, 40],
    ['2018-06-09', 9, 50],
    ['2018-06-10', null, 60],
    ['2018-06-11', null, 70],
    ['2018-06-12', null, 80],
    ['2018-06-13', null, 90],
    ['2018-06-14', null, 100]
  ];


  let dataChart = [];

  function filter(format) {
    dataChart = [];
    let lastDate = '';
    let value = 0;
    [].forEach.call(data, (d, i) => {

      let date = moment(d[0], 'YYYY-MM-DD').format(format);

      if (i === 0)
        lastDate = date;

      if (lastDate === date - 1) {
        value += (d[1] !== null) ? d[1] : d[2];
      } else {
        dataChart.push([date, d[1], d[2]]);
        lastDate = date;
        value = (d[1] !== null) ? d[1] : d[2];
      }

      if (i === data.length) dataChart.push([date, d[1], d[2]]);

    });

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

  filter('DD-M');

  function drawChart() {
    var chart = new google.visualization.DataTable();
    chart.addColumn('string', 'Date');
    chart.addColumn('number', 'Action1');
    chart.addColumn('number', 'Action2');
    chart.addRows(dataChart)

    let container = document.getElementById('chart_div');
    let dChart = new google.visualization.LineChart(container);
    dChart.draw(chart);
  }
</script>
...