Google圖表的X軸看起來不太好

Question

我使用Google Charts API繪制圖表。 我得到這張圖：

我在這張圖中的問題是X軸。 標簽看起來不太好。 如果我在X軸上有更多的弦，它看起來像這樣：

我認為問題是因為X列類型是字符串而不是DATETIME。 如何更改Google圖表中的列類型？ 或如何在不更改列類型的情況下更改X軸？ 我在下面添加腳本...

PHP代碼 ：

$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代碼 ：

  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代碼 ：

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

謝謝！

Answer 1

我找到了答案。

我全都分享。 所以如果有人像我一樣卡住 將很快繼續提供此幫助。

我創建了一個新變量： var showEvery = parseInt(data.getNumberOfRows() / 4);

然后在option屬性中添加： 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);

Answer 2

您可以通過設置hAxis.viewWindow.min和hAxis.viewWindow.max來強制設置BarChart的x軸：

hAxis: {
    viewWindow: {
        min: 0,
        max: 100
    },
    ticks: [0, 50, 100] // display labels every 50
}

這適用於數字或百分比，與日期一起使用會更加復雜：在Google API中選中“ 自定義軸” ，有兩種解決方案：

• 您可以將主要的X軸更改為離散和日期類型

圖表的主軸可以是離散的，也可以是連續的。 當使用離散軸時，每個系列的數據點根據它們的行索引在整個軸上均勻分布。 使用連續軸時，數據點將根據其域值進行定位。

• 閱讀“ 自定義軸”鏈接部分，該部分以“ Help! My chart has gone wonky!開頭Help! My chart has gone wonky! Help! My chart has gone wonky! 此處說明了如何從date更改為string ，然后對其進行自定義...