1

我使用谷歌图表 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(`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>

谢谢！

4

2 回答 2

6

我找到了答案。

我分享给大家。所以如果有人卡住了，比如我。将继续快速提供此帮助。

我创建新变量：var showEvery = parseInt(data.getNumberOfRows() / 4);

在选项属性中我添加：hAxis: {showTextEvery: showEvery}

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

    var data = google.visualization.arrayToDataTable(<?php echo $str?>);

    var showEvery = parseInt(data.getNumberOfRows() / 4);
    
    var options = {
        title: '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);
于 2015-03-04T11:26:12.890 回答
3

您可以强制设置条形图的 x 轴hAxis.viewWindow.min和hAxis.viewWindow.max：

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

这适用于数字或百分比，与日期一起使用有点复杂：检查Google API 中的自定义轴，有两种解决方案：

  • 您可以将主要 X 轴更改为离散和日期类型

图表的主轴可以是离散的或连续的。使用离散轴时，每个系列的数据点根据它们的行索引在轴上均匀分布。使用连续轴时，数据点根据其域值定位。

  • 阅读，在自定义轴链接部分开始，Help! My chart has gone wonky!其中解释了如何从更改date到string然后自定义它的步骤......
于 2015-03-04T10:37:20.957 回答