具有多列数据的谷歌折线图工具提示

Question

我有一个折线图，它显示 2 条线：一条代表带有值的日期范围，另一条线是带有先前值的上一个时期（也是日期）。

我想在每行的工具提示中显示相关日期和值。

工具提示将如下所示：

这就是我现在拥有的：

function drawChart(chartData, elemId, chartWidth, chartHeight, startDate, endDate) {
    var chartToDraw = new google.visualization.DataTable();
     chartToDraw.addColumn('date', 'Date');
     chartToDraw.addColumn('number', 'Value');
     chartToDraw.addColumn({
         type: 'string',
         role: 'tooltip',
         properties: {
             html: true
         },
         calc: function (dt, row) { //doesn't get called for some reason
            var date = dt.getValue(row, 2);
            var val = dt.getValue(row, 1);
            return '<div>' + date + ' </br><b>value:</b>' + val + '</div>';
         }
     });
     chartToDraw.addColumn('number', 'Previous value');
     chartToDraw.addColumn({
         type: 'string',
         role: 'tooltip',
         properties: {
             html: true
         },
         calc: function (dt, row) { //doesn't get called for some reason
             var date = dt.getValue(row, 4);
             var val = dt.getValue(row, 3);
             return '<div>' + date + ' </br><b>value:</b>' + val + '</div>';
            }
        });

        if (chartData['dataPoints'] != undefined) {
            var currentDataArr = [];
            for (var point in chartData['dataPoints']) {
                currentDataArr.push([
                    chartData['dataPoints'][point].date,
                    chartData['dataPoints'][point].value,
                    chartData['dataPoints'][point].date,
                    chartData['dataPoints'][point].prevValue,
                    chartData['dataPoints'][point].prevDate
                ]);
            }
        }
        chartToDraw.addRows(currentDataArr);



    var timeFormatter = new google.visualization.DateFormat({
        pattern: "MMM dd"
    });
    timeFormatter.format(chartToDraw, 0);
    timeFormatter.format(chartToDraw, 2);
    timeFormatter.format(chartToDraw, 4);

    var options = {
        legend: 'none',
        'width': chartWidth,
        'height': chartHeight,
        pointSize: 4,
        colors: ['#0289cb', '#01af8a'],
        tooltip: {
            isHtml: true
        },
        chartArea: {
            width: '80%'
        },
        hAxis: {
            slantedText: true,
            slantedTextAngle: 30,
            viewWindow: {
                min: startDate,
                max: endDate
            },
            gridlines: {
                count: -1,
                units: {
                    days: {format: ['MMM dd']},
                    hours: {format: ['HH:mm', 'ha']}
                }
            },
            minorGridlines: {
                units: {
                    hours: {format: ['hh:mm:ss a', 'ha']},
                    minutes: {format: ['HH:mm a Z', ':mm']}
                }
            }
        },
        vAxis: {
            viewWindow: {
                min: 0
            }
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById(elemId));
    chart.draw(chartToDraw, options);
}

问题是我现在在工具提示上看到的只是正确的日期，而我错过了这个值。 我不确定为什么没有调用 calc 函数，如果我将工具提示的类型更改为 string 我只会收到 mismatch type 错误。

这是我目前看到的：

Google Chart HTML Tooltip displays html text

Add tooltips to a Google Line Chart with multiple data series - with simplified test case and screenshot

但我为重新排列这些答案所做的所有更改都失败了。 我做错了什么？

Answer 1

计算列仅适用于DataView Class
不是DataTable Class...

要使用，请先加载您的 DataTable，然后创建 DataView
使用setColumns 添加工具提示...

从问题来看，它可能看起来像这样......

var chartToDraw = new google.visualization.DataTable();
chartToDraw.addColumn('date', 'Date');
chartToDraw.addColumn('number', 'Value');
chartToDraw.addColumn('number', 'Previous value');
chartToDraw.addColumn('date', 'Previous Date');

if (chartData['dataPoints'] != undefined) {
    var currentDataArr = [];
    for (var point in chartData['dataPoints']) {
        currentDataArr.push([
            chartData['dataPoints'][point].date,
            chartData['dataPoints'][point].value,
            chartData['dataPoints'][point].prevValue,
            chartData['dataPoints'][point].prevDate
        ]);
    }
}
chartToDraw.addRows(currentDataArr);

// create view over data, set columns
var dataView = new google.visualization.DataView(chartToDraw);
dataView.setColumns([0, 1,
  {
    type: 'string',
    role: 'tooltip',
    properties: {
      html: true
    },
    calc: function (dt, row) {
      var date = dt.getValue(row, 0);
      var val = dt.getValue(row, 1);
      return '<div>' + date + ' </br><b>value:</b>' + val + '</div>';
    }
  },
  2,
  {
    type: 'string',
    role: 'tooltip',
    properties: {
      html: true
    },
    calc: function (dt, row) {
      var date = dt.getValue(row, 3);
      var val = dt.getValue(row, 2);
      return '<div>' + date + ' </br><b>value:</b>' + val + '</div>';
    }
  }
]);