谷歌图表X轴看起来不太好 [英] Google charts X-axis don't look so good
问题描述
我使用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>
谢谢!
我找到了答案。
我共享它。所以如果有人卡住了,像我一样。我会创建新的变量: 并且在选项属性中添加: 所以JS代码看起来像这样: 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: JS code:
HTML code: 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: And in the option attribute i add: so the JS code seems like this:
这篇关于谷歌图表X轴看起来不太好的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! var showEvery = parseInt(data.getNumberOfRows()/ 4); $> c code
hAxis:{showTextEvery:showEvery}
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);
$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);
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);
<div id="curve_chart" class="plot" style="width: 50% ; height: 400px ; float:left; margin-left:9%;"></div>
var showEvery = parseInt(data.getNumberOfRows() / 4);
hAxis: {showTextEvery: showEvery}
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);