0

我的网站上有这张图，它工作正常，一切都很好，但日期：

在此处输入图像描述

日期没有正确显示在一行中，它们以和谐的方式显示。起初我的日期就像 2013-09-01 或 2013-09-02 但它们也像这样显示然后我将它们更改为当前格式，但问题仍然存在。

在 PHP 中，我有：

@$previousDate2=$array[1]['previousDate'];
@$previousDate3=$array[2]['previousDate'];
@$previousDate4=$array[3]['previousDate'];
@$previousDate5=$array[4]['previousDate'];
@$previousDate6=$array[5]['previousDate'];
@$previousDate7=$array[6]['previousDate'];
@$previousDate8=$array[7]['previousDate'];

在上面的代码中，我以 Ymd 格式从 MySQL 数据库中检索日期，然后在将它们存储在这些变量中之后，我使用 date_create() 和 date_format() 函数格式化这些变量。

$previousDate8=date_create($previousDate8);
$previousDate8=date_format($previousDate8, 'd/m');

$previousDate7=date_create($previousDate7);
$previousDate7=date_format($previousDate7, 'd/m');

$previousDate6=date_create($previousDate6);
$previousDate6=date_format($previousDate6, 'd/m');

$previousDate5=date_create($previousDate5);
$previousDate5=date_format($previousDate5, 'd/m');

$previousDate4=date_create($previousDate4);
$previousDate4=date_format($previousDate4, 'd/m');

$previousDate3=date_create($previousDate3);
$previousDate3=date_format($previousDate3, 'd/m');

$previousDate2=date_create($previousDate2);
$previousDate2=date_format($previousDate2, 'd/m');

在 JavaScript 中，我有

    var date1 = "<?php echo $previousDate2; ?>";
    var date2 = "<?php echo $previousDate3; ?>";
    var date3 = "<?php echo $previousDate4; ?>";
    var date4 = "<?php echo $previousDate5; ?>";
    var date5 = "<?php echo $previousDate6; ?>";
    var date6 = "<?php echo $previousDate7; ?>";
    var date7 = "<?php echo $previousDate8; ?>";

对于 Graph 函数，我有

  function drawVisualization() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Followers');
  data.addRows([
    [date7, follower7],
    [date6,  follower6],
    [date5,  follower5],
      [date4,  follower4],
      [date3,  follower3],
      [date2,  follower2],
      [date1,  follower1]


  ]);


    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 100+'%', 
                    height: 400,
                    vAxis: {maxValue: 10},
                    pointSize: 5}
            );
  }

需要帮助。谢谢

4

1 回答 1

2

不幸的是，我相信当前的宽度对于这些字符串来说仍然太小了。我在 jsfiddle 中运行了您的代码，当图表变宽时，它似乎适合一行。

你有几个选择：

您可以使图表更宽，但鉴于您已经设置了 100%，我怀疑您在此范围内受到限制。

您可以使用倾斜的文本。在您的选项中，添加：

hAxis: {slantedText: true}

您甚至可以控制倾斜的角度。

示例：http: //jsfiddle.net/e3f9S/1/

此处的文档：https ://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options

于 2013-09-03T19:13:32.523 回答