グーグルラインチャート複数の列データを持つツールヒント

Question

私は、2つの線を示す折れ線グラフを持っています：1つは値のある日付範囲を表し、もう1つの線は前の値との前の期間（日付も）です。

各行のツールヒントに関連する日付と値を表示します。

ツールチップは、次のようになります。

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

問題はすべて、私はツール - 右今見ていることである。

これは私が今持っているものですヒントはちょうど正しい日付であり、私は価値を見逃しています。 ツールチップのタイプをstringに変更すると、calcが呼び出されない理由が分かりません。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

が、私はそれらの答えをresambleするために行ったすべての変更に失敗しました：ここに

は、私がこれまで見てきたものです。 何が間違っていますか？列のみDataView Class
ないDataTable Class ...

、あなたのツールチップを追加するのDataView
使用setColumnsを作成し、あなたのDataTable最初のロード、使用するにして働く計算

Answer 1

...

質問から、それはこのように見えるかもしれません...

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