javascript - 图表 - 按时间过滤的谷歌图表

Question

我想制作一个折线图来表示几个 Action ，其中包含该 Action 的时间空间中几天的累计值。

此图形将有一个过滤器，将按天/周/月过滤。

一开始我将日期列设置为字符串类型，如果你只有一个 Action 就可以，但如果你有多个 Action 并且同时开始，它会重复那些点，这是不应该的.

所以我将日期列设置为日期，它解决了不重复点的问题，问题是当我将过滤器应用于周和月时，将写为“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>

Answer 1

问题

"...and if you have only one action works, but if you have more than one and if it starts at the same time, it duplicates those points, which was not supposed to."

---

解决方案

---

数组数据

数据数组有重复的日期，因此重复的点是不可避免的。

比较原始值...

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(x 或水平轴)的末尾创建重复的一天，其中最后两列都是:14-6。

要更正列重复，请从 .length 中删除 -1:

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

---

一次性日期

以下条件:

 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>