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

我有一个折线图，它显示了两行：一行表示带有值的日期范围，另一行表示带有先前值的上一个期间（也是日期）

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

工具提示如下所示：

这就是我现在拥有的：

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

函数绘图图（chartData、elemId、chartWidth、chartHeight、startDate、endDate）{
var chartToDraw=new google.visualization.DataTable（）；
chartToDraw.addColumn（'date'，'date'）；
chartToDraw.addColumn（'number'，'Value'）；
chartToDraw.addColumn({
键入：“字符串”，
角色：“工具提示”，
特性：{
html：对
},
计算：函数（dt，row）{//由于某种原因没有被调用
var日期=dt.getValue（第2行）；
var val=dt.getValue（第1行）；
返回“+date+”
值：“+val+”；
}
});
chartToDraw.addColumn（'number'，'Previous value'）；
chartToDraw.addColumn({
键入：“字符串”，
角色：“工具提示”，
特性：{
html：对
},
计算：函数（dt，row）{//由于某种原因没有被调用
var日期=dt.getValue（第4行）；
var val=dt.getValue（第3行）；
返回“+date+”
值：“+val+”；
}
});
if（chartData['dataPoints']！=未定义）{
var currentDataArr=[]；
对于（chartData['dataPoints']中的var点）{
currentDataArr.push([
chartData['dataPoints'][point]。日期，
chartData['dataPoints'][point]。值，
chartData['dataPoints'][point]。日期，
chartData['dataPoints'][point].prevValue，
chartData['dataPoints'][point].prevDate
]);
}
}
chartToDraw.addRows（currentDataArr）；
var timeFormatter=new google.visualization.DateFormat({
图案：“MMM-dd”
});
timeFormatter.format（chartToDraw，0）；
timeFormatter.format（chartToDraw，2）；
timeFormatter.format（chartToDraw，4）；
变量选项={
图例：“无”，
“宽度”：图表宽度，
“高度”：图表高度，
点数：4，
颜色：['#0289cb'，'#01af8a']，
工具提示：{
isHtml：是的
},
图表区：{
宽度：“80%”
},
哈克斯：{
是的，
倾斜角度：30，
视图窗口：{
民：开始日期，
最大值：结束日期
},
网格线：{
计数：-1，
单位：{
日期：{格式：['MMM dd']}，
小时数：{格式：['HH:mm'，'ha']}
}
},
minorGridlines：{
单位：{
小时数：{格式：['hh:mm:ss a'，'ha']}，
分钟：{格式：['HH:mm a Z'，':mm']}
}
}
},
言辞：{
视图窗口：{
最低：0
}
}
};
var chart=new google.visualization.LineChart（document.getElementById（elemId））；
chart.draw（chartToDraw，选项）；
}

问题是，我现在在工具提示上看到的只是正确的日期，我没有看到值。 我不确定为什么没有调用

calc

函数，如果我将工具提示的类型更改为

string

我只会得到一个

不匹配类型

错误

以下是我到目前为止看到的：

但我所做的所有改变都失败了。

---

我做错了什么？

计算列只适用于
不是

要使用，请先加载数据表，然后创建数据视图
用于添加工具提示

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

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

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']！=未定义）{
var currentDataArr=[]；
对于（chartData['dataPoints']中的var点）{
currentDataArr.push([
chartData['dataPoints'][point]。日期，
chartData['dataPoints'][point]。值，
chartData['dataPoints'][point].prevValue，
chartData['dataPoints'][point].prevDate
]);
}
}
chartToDraw.addRows（currentDataArr）；
//在数据上创建视图，设置列
var dataView=newgoogle.visualization.dataView（chartToDraw）；
dataView.setColumns（[0,1,0，
{
键入：“字符串”，
角色：“工具提示”，
特性：{
html：对
},
计算：函数（dt，行）{
var date=dt.getValue（行，0）；
var val=dt.getValue（第1行）；
返回“+date+”
值：“+val+”；
}
},
2.
{
键入：“字符串”，
角色：“工具提示”，
特性：{
html：对
},
计算：函数（dt，行）{
var日期=dt.getValue（第3行）；
var val=dt.getValue（第2行）；
返回“+date+”
值：“+val+”；
}
}
]);

谢谢！这很有帮助，我只是缺少了

prevDate

，我将其添加为另一列，在第二个工具提示中的

2，

之后添加了

3，

，并更改为

var date=dt.getValue（第3行），但我得到了一个错误：
给定轴上的所有序列都必须是相同的数据类型
，知道如何解决吗？是的，第二个日期是推迟的。如果数据中包含两个日期，则必须使用两个轴“。。。是否要使用“上一个日期”在第二个轴上绘制上一个值？或者在当前日期的轴上打印上一个值，并在工具提示中仅显示上一个日期？如果拿铁