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

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>