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

Question

我想制作一个折线图，用该操作的时间空间内几天的累积值来表示几个操作。

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

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

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

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

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>