javascript - 工具提示上按月计算的折线图总计

Question

我正在尝试按工具提示上的月份名称合计值。

我在轴上有月份名称的折线图，但是当我将鼠标悬停在点上时，它会在图表上显示单个记录。我想按月显示总数。

var dateTicks = [];
    for (var m = 1; m <= 12; m++)
        dateTicks.push(new Date('2015-' + m + '-1'));

    var options = {
        hAxis: {
            format: 'MMMM',
            ticks: dateTicks
        }
    };

这里是 jsfiddle

任何想法。

Answer 1

这是代码，根据需要重构它：

google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawCurveTypes);

   var datasetr = [
        [new Date('2015-01-01'), 40, 50],
        [new Date('2015-01-15'), 20, 80],
        [new Date('2015-01-16'), 21, 80],
        [new Date('2015-01-17'), 25, 80],
        [new Date('2015-01-21'), 20, 80],
        [new Date('2015-02-15'), 60, 30],
        [new Date('2015-03-01'), 40, 50],
        [new Date('2015-03-15'), 20, 80],
        [new Date('2015-04-01'), 20, 80],
        [new Date('2015-04-15'), 60, 30],
        [new Date('2015-05-01'), 40, 50],
        [new Date('2015-05-15'), 20, 80],
        [new Date('2015-06-01'), 20, 80],
        [new Date('2015-06-15'), 60, 30],
        [new Date('2015-07-01'), 40, 50],
        [new Date('2015-07-15'), 20, 80],
        [new Date('2015-08-01'), 20, 80],
        [new Date('2015-08-15'), 60, 30],
        [new Date('2015-09-01'), 40, 50],
        [new Date('2015-09-15'), 20, 80],
        [new Date('2015-10-01'), 20, 80],
        [new Date('2015-10-15'), 60, 30],
        [new Date('2015-11-01'), 40, 50],
        [new Date('2015-11-15'), 20, 80],
        [new Date('2015-12-01'), 20, 80],
        [new Date('2015-12-15'), 60, 30],
    ];
    var group = datasetr.reduce((r, a) => {
            r[a[0].getMonth()] = [...r[a[0].getMonth()] || [], a];
            return r;
        }, []);
    
    var finalDataset = [];
    var sumValues = group.map(item => {
        const sumValues1 = item.reduce((a, i) => {
        a += i[1];
        return a;
      }, 0);
      const sumValues2 = item.reduce((a, i) => {
        a += i[2];
        return a;
      }, 0);
      item.forEach(iloop => {
        finalDataset.push([iloop[0], sumValues1, sumValues2]);
      });
    });
    
    
    
function drawCurveTypes() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Day');
    data.addColumn('number', 'Value 1');
    data.addColumn('number', 'Value 2');
      data.addRows(finalDataset);

    var dateTicks = [];
    for (var m = 1; m <= 12; m++)
        dateTicks.push(new Date('2015-' + m + '-1'));

    var options = {
        hAxis: {
            format: 'MMMM',
            ticks: dateTicks
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    }