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>';
    }
  }
]);

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

1 个答案: