图表-带有按时间过滤的Google图表

Question

我想制作一个折线图来表示几个动作，并在该动作的时间间隔内累积几天的累计值。

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

在一开始，我将日期列设置为字符串类型，如果只有一个动作有效，但是如果有多个动作同时开始，它将重复这些点，这不应该

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

问题

  

“ ...并且，如果只有一个动作有效，但如果有多个动作且同时开始，则会复制那些原本不应该的动作。”

---

解决方案

---

数组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（x轴或水平轴）的末尾创建重复的一天，其中最后两列均为：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>