圖表 - 按時間過濾的谷歌圖表

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>