如何使用谷歌圖表隱藏確切日期並在工具提示中顯示範圍

在下面我嘗試使用點的工具提示來顯示範圍，而不是確切的時間。相反的「5:30」它應該顯示在tooltip.I「5-6PM」嘗試把一個列的作用，但隨後不與圖形如何使用谷歌圖表隱藏確切日期並在工具提示中顯示範圍

<html> 
    <head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     // Load the Visualization API and the corechart package. 
     google.charts.load('current', {'packages':['corechart','line']}); 
     // Set a callback to run when the Google Visualization API is loaded. 
     google.charts.setOnLoadCallback(drawChart); 
     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 
     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('datetime', 'Topping'); 
     data.addColumn('number','cat1'); 
     data.addRows([ 
      [new Date("2017-08-09T13:00:00.000Z"),145289], 
      [new Date("2017-08-09T12:00:00.000Z"),138370], 
      [new Date("2017-08-09T11:00:00.000Z"),117605], 
      [new Date("2017-08-09T10:00:00.000Z"),81268], 
      [new Date("2017-08-09T09:00:00.000Z"),59815], 
      [new Date("2017-08-09T08:00:00.000Z"),51899] 
     ]); 
     //console.log(data); 
     var options = { 
      'title':'How Much Pizza I Ate Last Night', 
      //focusTarget: 'category', 
      showCategories:true 
     }; 
     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 

    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div" style="width: 50%;height:50%"></div> 
    </body> 
</html>

Google Chart Code Output

來源

2017-08-16 yazmeh

的範圍內保持動態

可以使用DataView爲工具提示作用

爲顯示範圍添加計算列，
建議使用谷歌的DateFormat拿到小時和AM/PM，兩者的開始和結束時間
以及計算一個新的da TE爲最終小時

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('datetime', 'Topping'); 
 
    data.addColumn('number', 'cat1'); 
 
    data.addRows([ 
 
    [new Date("2017-08-09T13:00:00.000Z"),145289], 
 
    [new Date("2017-08-09T12:00:00.000Z"),138370], 
 
    [new Date("2017-08-09T11:00:00.000Z"),117605], 
 
    [new Date("2017-08-09T10:00:00.000Z"),81268], 
 
    [new Date("2017-08-09T09:00:00.000Z"),59815], 
 
    [new Date("2017-08-09T08:00:00.000Z"),51899] 
 
    ]); 
 

 
    var formatHour = new google.visualization.DateFormat({ 
 
    pattern: 'ha' 
 
    }); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
    calc: function (dt, row) { 
 
     var oneHour = (1000 * 60 * 60); 
 
     var rowDate = dt.getValue(row, 0); 
 
     var rangeHour1 = formatHour.formatValue(rowDate); 
 
     var rangeHour2 = formatHour.formatValue(new Date(rowDate.getTime() + oneHour)); 
 
     return rangeHour1 + '-' + rangeHour2; 
 
    }, 
 
    type: 'string', 
 
    role: 'tooltip' 
 
    }]); 
 

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

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

來源

2017-08-16 11:37:08 WhiteHat

這個問題的任何運氣？ – WhiteHat

如何使用谷歌圖表隱藏確切日期並在工具提示中顯示範圍

回答

相關問題