使用jsondata在Google Charts hAxis上设置小时和分钟

时间：2016-08-08 20:53:09

标签： php jquery json ajax google-visualization

我有一个Google Line图表，可以按时间生成一些推文。如您所见，它目前没有显示30分钟的间隔。我如何得到它说早上6:30，早上7:30等...另外，我如何默认它在早上6点之间切换到早上6:30，但是在整个图表中都是如此。例如，如果最近的时间是早上6:30，那么所有人都应该在30（早上7:30，早上8:30等）阅读。

{"cols":[{"id":"datetime","label":"datetime","type":"datetime"},{"id":"Tweets","label":"Tweets","type":"number"},{"role":"annotation","type":"string"},{"type":"string","role":"style"}],"rows":[{"c":[{"v":"Date(2016, 8, 08, 13, 30, 0)"},{"v":"5010"},{"v":"5010"},{"v":"point {fill-color: #5e6771}"}]},{"c":[{"v":"Date(2016, 8, 08, 13, 0, 0)"},{"v":"4670"},{"v":"4670"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 14, 0, 0)"},{"v":"4543"},{"v":"4543"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 14, 30, 0)"},{"v":"3230"},{"v":"3230"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 16, 30, 0)"},{"v":"3167"},{"v":"3167"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 16, 0, 0)"},{"v":"3013"},{"v":"3013"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 15, 0, 0)"},{"v":"2924"},{"v":"2924"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 15, 30, 0)"},{"v":"2892"},{"v":"2892"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 12, 30, 0)"},{"v":"2205"},{"v":"2205"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 11, 0, 0)"},{"v":"1789"},{"v":"1789"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 11, 30, 0)"},{"v":"1753"},{"v":"1753"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 9, 30, 0)"},{"v":"1653"},{"v":"1653"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 9, 0, 0)"},{"v":"1611"},{"v":"1611"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 12, 0, 0)"},{"v":"1598"},{"v":"1598"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 8, 30, 0)"},{"v":"1531"},{"v":"1531"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 10, 30, 0)"},{"v":"1490"},{"v":"1490"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 10, 0, 0)"},{"v":"1424"},{"v":"1424"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 8, 0, 0)"},{"v":"1081"},{"v":"1081"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 7, 30, 0)"},{"v":"888"},{"v":"888"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 7, 0, 0)"},{"v":"679"},{"v":"679"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 6, 30, 0)"},{"v":"673"},{"v":"673"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 6, 0, 0)"},{"v":"666"},{"v":"666"},{"v":null}]}]}

Tweet Volume Chart

Google图表代码：

<table class="graph-table">
        <tr><td class="headerspacing2" colspan="3"><span class="header">Tweet Volume</span></td></tr>
        <tr align="center"><td colspan="2">
<div id="curve_chart" style="width: 1280px; height: 430px">

    <script type="text/javascript">

 google.charts.load('current', {
  callback: function () {
    drawChart();
    setInterval(drawChart, (60000));

    function drawChart() {
      $.ajax({
        url: 'grab_twitter_stats.php',
        type: 'get',
        success: function (txt) {

var data = new google.visualization.DataTable(txt);
data.sort([{column: 0, desc:true}]);

          var options = {
      curveType: 'function',
      hAxis: {
          format: 'H, m',
          textStyle: {
              color: '#7acdd0',
              fontSize: 20
          },
        gridlines: {
            count: -1,
              color: 'transparent'
          },
      },
      vAxis: {
          gridlines: {
              color: '#7acdd0',
              count: 1
          },
          textPosition: 'none'
      },
      emphasis: {
            'color':'#000000',
            },
      pointSize: 15,
      chartArea: {'width': '92%', 'height': '85%'},
      pointShape: 'circle',
      lineWidth: 5,
      colors: ['#7acdd0'],
      annotations: {
          stemColor : 'none'
      },
      'tooltip' : {
          trigger: 'none'
      },
      legend: { position: 'none' }
      };


          var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
          chart.draw(data, options);

        }
      });
    }
  },
  packages: ['corechart']
});

</script>   
    </div> 
        </td></tr>
    </table>

1 个答案:

答案 0 :(得分：1)

使用hAxis.ticks configuration option在x轴上设置自定义标签

每个刻度应与x轴列的数据类型相同 所以你可以提取data

的值 
var tickMarks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
  tickMarks.push(data.getValue(i, 0));
}

取决于标签的格式，您可能需要调整chartArea

请参阅以下工作代码段...

＆＃13;
＆＃13; 
google.charts.load('current', {
  callback: function () {
    txt = {"cols":[{"id":"datetime","label":"datetime","type":"datetime"},{"id":"Tweets","label":"Tweets","type":"number"},{"role":"annotation","type":"string"},{"type":"string","role":"style"}],"rows":[{"c":[{"v":"Date(2016, 7, 08, 13, 30, 0)"},{"v":"5010"},{"v":"5010"},{"v":"point {fill-color: #5e6771}"}]},{"c":[{"v":"Date(2016, 7, 08, 13, 0, 0)"},{"v":"4670"},{"v":"4670"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 14, 0, 0)"},{"v":"4543"},{"v":"4543"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 14, 30, 0)"},{"v":"3230"},{"v":"3230"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 16, 30, 0)"},{"v":"3167"},{"v":"3167"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 16, 0, 0)"},{"v":"3013"},{"v":"3013"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 15, 0, 0)"},{"v":"2924"},{"v":"2924"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 15, 30, 0)"},{"v":"2892"},{"v":"2892"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 12, 30, 0)"},{"v":"2205"},{"v":"2205"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 11, 0, 0)"},{"v":"1789"},{"v":"1789"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 11, 30, 0)"},{"v":"1753"},{"v":"1753"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 9, 30, 0)"},{"v":"1653"},{"v":"1653"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 9, 0, 0)"},{"v":"1611"},{"v":"1611"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 12, 0, 0)"},{"v":"1598"},{"v":"1598"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 8, 30, 0)"},{"v":"1531"},{"v":"1531"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 10, 30, 0)"},{"v":"1490"},{"v":"1490"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 10, 0, 0)"},{"v":"1424"},{"v":"1424"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 8, 0, 0)"},{"v":"1081"},{"v":"1081"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 7, 30, 0)"},{"v":"888"},{"v":"888"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 7, 0, 0)"},{"v":"679"},{"v":"679"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 6, 30, 0)"},{"v":"673"},{"v":"673"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 6, 0, 0)"},{"v":"666"},{"v":"666"},{"v":null}]}]};

    var data = new google.visualization.DataTable(txt);
    data.sort([{column: 0, desc:true}]);

    var tickMarks = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      tickMarks.push(data.getValue(i, 0));
    }

    var options = {
      annotations: {
        stemColor : 'none'
      },
      chartArea: {
        width: '92%',
        height: '70%'
      },
      colors: ['#7acdd0'],
      curveType: 'function',
      emphasis: {
        color: '#000000'
      },
      hAxis: {
        format: 'H:mm a',
        gridlines: {
          count: -1,
          color: 'transparent'
        },
        textStyle: {
          color: '#7acdd0',
          fontSize: 14
        },
        ticks: tickMarks
      },
      height: 400,
      legend: {
        position: 'none'
      },
      lineWidth: 5,
      pointShape: 'circle',
      pointSize: 15,
      tooltip : {
        trigger: 'none'
      },
      width: 1280,
      vAxis: {
        gridlines: {
          color: '#7acdd0',
          count: 1
        },
        textPosition: 'none'
      }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});
＆＃13; 
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题