谷歌图表X轴看起来不太好

本文介绍了谷歌图表X轴看起来不太好的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用Google图表API绘制图表。我得到这张图表：

这个图表中的问题是X轴。标签看起来不太好。 如果我在X轴上有更多的字符串，如下所示：

我认为问题是因为X列类型是字符串而不是DATETIME。 我如何更改谷歌图表中的列类型？ 或者我如何改变X轴而不改变列类型？ 我在下面添加脚本...

PHP代码：

$ connection = mysql_connect（'127.0.0.1'，'root'，'123456'）; mysql_select_db（'db_statmarket'，$ connection）; $ result2 = mysql_query（'select sum（`从客户读取多少）作为Leads，来自监视器组的日期;'，$ connection）或者死亡（'can not show tables'）; $ json = array（）; while（$ row = mysql_fetch_assoc（$ result2））{ $ json [] = $ row; } $ str ='[\'Date\'，\'Leads\''，'; foreach（$ json as $ key => $ value）{ $ str = $ str。'['。'\''。$ value [Date]。 '\''。'，'。$ value [Leads]。']，'; } $ str = substr（$ str，0，-1）; $ str ='['。$ str。']'; $ result1 = mysql_query（'SELECT * FROM monitor ORDER BY customer_id DESC LIMIT 1;'，$ connection）or die（'can not show tables'）; $ row = mysql_fetch_assoc（$ result1）;

JS代码：

google.setOnLoadCallback（drawChart）; function drawChart（）{ var data = google.visualization.arrayToDataTable（<？php echo $ str？>）; var options = { title：''， curveType：'function'， legend：{position：'bottom'}， width ：1000， backgroundColor：'＃efeff0'， is3D：true， chartArea：{ backgroundColor：{ stroke：'＃efeff1'， strokeWidth：1}}， height：300 }; var chart = new google.visualization.LineChart（document.getElementById（'curve_chart'））; chart.draw（data，options）;

$ b HTML代码：

< div id =curve_chartclass =plotstyle =width：50％; height ：400px; float：left; margin-left：9％;>< / div>

谢谢！

解决方案

我找到了答案。

我共享它。所以如果有人卡住了，像我一样。我会创建新的变量： var showEvery = parseInt（data.getNumberOfRows（）/ 4）; c code

并且在选项属性中添加： hAxis：{showTextEvery：showEvery}

所以JS代码看起来像这样：

var data = google.visualization .arrayToDataTable（<？php echo $ str？>）; var show = parseInt（data.getNumberOfRows（）/ 4）; var options = { title：''， curveType：'function'， legend：{position：'bottom'}， width ：1000， backgroundColor：'＃efeff0'， is3D：true， chartArea：{ backgroundColor：{ stroke：'＃efeff1'， strokeWidth：1}}， hAxis：{showTextEvery：showEvery}， height：300 }; var chart = new google.visualization.LineChart（document.getElementById（'curve_chart'））; chart.draw（data，options）;

I draw a chart using google charts API. and i get this chart:

My problem in this chart is the X-axis. The labels are not in look so good. if I have more Strings in X-axis it's look like this:

I think the problem is because the X column type is string and not DATETIME. How i change the column type in google charts? Or How i change the X-axis without changin the column type? I add the script here below...

PHP code:

$connection = mysql_connect('127.0.0.1','root','123456'); mysql_select_db('db_statmarket',$connection); $result2 = mysql_query('select sum(`How much read from customer`) as Leads, Date from monitor group by Date;',$connection) or die('cannot show tables'); $json = array(); while($row = mysql_fetch_assoc($result2)) { $json[] = $row; } $str='[\'Date\', \'Leads\'],'; foreach($json as $key=>$value){ $str = $str.'['.'\''.$value["Date"].'\''.', '.$value["Leads"].'],'; } $str = substr($str, 0, -1); $str = '['.$str.']'; $result1 = mysql_query('SELECT * FROM monitor ORDER BY customer_id DESC LIMIT 1;',$connection) or die('cannot show tables'); $row = mysql_fetch_assoc($result1);

JS code:

google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable(<?php echo $str?>); var options = { title: '', curveType: 'function', legend: { position: 'bottom' }, width: 1000, backgroundColor: '#efeff0', is3D: true, chartArea: { backgroundColor: { stroke: '#efeff1', strokeWidth: 1}}, height: 300 }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options);

HTML code:

<div id="curve_chart" class="plot" style="width: 50% ; height: 400px ; float:left; margin-left:9%;"></div>

Thanks!

解决方案

I found The answer.

I share It for all. so if somebody stuck, like me. will continue with this help quickly.

I create new variable: var showEvery = parseInt(data.getNumberOfRows() / 4);

And in the option attribute i add: hAxis: {showTextEvery: showEvery}

so the JS code seems like this:

var data = google.visualization.arrayToDataTable(<?php echo $str?>); var show = parseInt(data.getNumberOfRows() / 4); var options = { title: '', curveType: 'function', legend: { position: 'bottom' }, width: 1000, backgroundColor: '#efeff0', is3D: true, chartArea: { backgroundColor: { stroke: '#efeff1', strokeWidth: 1}}, hAxis: {showTextEvery: showEvery}, height: 300 }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options);