如何使用Google图表隐藏确切日期并仅在工具提示中显示范围

Question

In the below I am trying the point's tooltip to show the range instead of the exact time eg Instead of '5:30' it should show '5-6pm' in the tooltip.I try put an column role but then it doesn't stay dynamic with the range of the graph 在下面，我尝试使用该点的工具提示来显示范围而不是确切的时间，例如，在工具提示中应显示“ 5-6pm”而不是“ 5:30”。我尝试放置列角色，但是它没有在图表范围内保持动态

 <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 Google图表代码输出

Answer 1

you can use a DataView to add a calculated column for the tooltip role 您可以使用DataView为工具提示角色添加计算列

as for showing the range, 至于显示范围，
recommend using google's DateFormat to get hour and am/pm, for both the begin and end hour 建议使用Google的DateFormat来获取小时和上午/下午，分别是开始时间和结束时间
as well as calculating a new date for the end hour 以及计算结束时间的新日期

see following working snippet... 请参阅以下工作片段...

 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>

如何使用Google图表隐藏确切日期并仅在工具提示中显示范围

问题描述

1 个解决方案

解决方案1
0 2017-08-16 11:37:08

如何使用Google图表隐藏确切日期并仅在工具提示中显示范围

问题描述

1 个解决方案

解决方案1 0 2017-08-16 11:37:08

解决方案1
0 2017-08-16 11:37:08