日期显示顺序未在谷歌折线图中按预期显示

Question

我在我的网站上有这个图表，它正常工作一切正常，但是日期：

日期不能正确地显示在一行中它们以谐波样式显示。 起初我的约会对象是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'];

在上面的代码中，我正在以Y-m-d格式从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}
            );
  }

需要帮助。 谢谢

Answer 1

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

您有几个选择：

你可以让图表更宽，但鉴于你已经设定了100％，我怀疑你在那里有限。

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

hAxis: {slantedText: true}

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

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

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