Charts 谷歌图表——轴值重叠及如何避免

如何避免谷歌图表中的轴重叠？我正在处理一个大数据集，不确定如何解决这个问题。我在x轴上使用了大量的日期。我用于图表的选项有

var options = {
    tooltip: {
        trigger: 'both',
    },
    width: 1900,
    height: 400,
    vAxis: { 'title': 'Volume' },
    crosshair: { trigger: 'both'}
};

编辑：： PHP创建容器

if( isset($db_graph_query)){
    while($row = mysqli_fetch_array($db_graph_query)) {
        $rowcount2++;
        // removed the hard coded column set and made it driven off of the array below
        // could have pulled it from the $cols array above, but there might be columns that we don't wish to show
        echo "                                <tr>";
        $colindex = 0;
        foreach( $cols as $column_name ) {
            $style = "";
            $val = $row[$column_name];
            if ( isset($column_callback)) {
                $style=$column_callback($colindex, $val);
            }
            if ($colindex == 0) {
                echo "<td style='text-align: left;  width: 1pt;'><a href='#' class='toggle' onClick='drawChart(\"$val\");'>$val</a></td>";
                $tempval = $val;
            } else {
                echo "<td $style>$val</td>";
            }
            $colindex++;
        }
        echo "</tr>";
        echo "<tr class='tablesorter-childRow'>";
            echo "<td colspan='12'>";
                echo "<div id='$tempval' style='height: 400px;'></div>";
            echo "</td>";
        echo "</tr>";
    }
}

if（isset（$db\u graph\u query））{
while（$row=mysqli\u fetch\u数组（$db\u graph\u query））{
$rowcount2++；
//移除硬编码列集，并将其从下面的阵列中移除
//可以从上面的$cols数组中提取，但是可能有我们不想显示的列
回声“；
$colindex=0；
foreach（$cols作为$column\u name）{
$style=“”；
$val=$row[$column_name]；
if（isset（$column_callback））{
$style=$column\u回调（$colindex，$val）；
}
如果（$colindex==0）{
回声“；
$tempval=$val；
}否则{
回音“$val”；
}
$colindex++；
}
回声“；
回声“；
回声“；
回声“；
回声“；
回声“；
}
}

编辑：： 绘制图表脚本，创建图表选项，从SQL DB获取数据并添加到数据中：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    function drawChart(inputname) {
        var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'RunDate');
            data.addColumn('number', 'Runs');
            data.addColumn('number', 'Fails');
            data.addRows([
                <?php
                    $dbName = "mydb";
                    $config = parse_ini_file("configfile.ini",true);
                    $dbUser = $config["DB"]["db_user"];
                    $dbServer = $config["DB"]["db_ip"];
                    $dbPassword = $config["DB"]["db_pass"];

                    $con = mysql_connect($dbServer, $dbUser, $dbPassword);

                    if (!$con) {
                        die('Could not connect: ' . mysql_error());
                    }

                    mysql_select_db($dbName, $con);
                    $sql = mysql_query("SELECT * From MyTestTable");

                    $output = array();

                    while($row = mysql_fetch_array($sql)) {
                        // create a temp array to hold the data
                        $temp = array();

                        // add the data
                        $temp[] = '"' . $row['Name'] . '"';
                        $temp[] = '"' . $row['RunDate'] . '"';
                        $temp[] = (int) $row['Runs'];
                        $temp[] = (int) $row['FailCount'];
                        // implode the temp array into a comma-separated list and add to the output array
                        $output[] = '[' . implode(', ', $temp) . ']';
                    }
                    // implode the output into a comma-newline separated list and echo
                    echo implode(",\n", $output);

                    mysql_close($con);
                ?>
        ]);
        var view = new google.visualization.DataView(data);
        view.setRows(data.getFilteredRows([
            {column: 0, value: inputname}
        ]));
        view.setColumns([1,2,3]);

            var options = {
                tooltip: {
                    trigger: 'both',
                },
                vAxis: { 'title': 'Volume' },
                crosshair: { trigger: 'both'},
                width: 1900,
                height: 400
            };

        var chart = new google.visualization.LineChart(document.getElementById(inputname));
        chart.draw(view, options);
    }
</script>

load（'current'，{'packages'：['corechart']}）；
函数绘图图（inputname）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'string'，'RunDate'）；
data.addColumn（'number'，'Runs'）；
data.addColumn（'number'，'Fails'）；
data.addRows([
尝试使用倾斜文本的选项

hAxis: {slantedText: true}

横轴上的刻度线不应该重叠，我认为唯一可能发生这种情况的方法是，如果你在绘制图表时看不到图表，那么图表认为刻度线不会占用任何空间，可以尽可能密集地堆积。倾斜或交替在你下来之前不一定有帮助到最小间距约束

因此，目前唯一真正的解决办法是确保绘制图表时图表是可见的