0

私のウェブサイトにこのグラフがあります。正しく機能しています。日付以外はすべて問題ありません。

ここに画像の説明を入力

日付が 1 行に正しく表示されず、ハーモニック スタイルで表示されます。最初は私の日付は 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'];

上記のコードでは、MySQL データベースから日付を Ymd 形式で取得し、これらの変数内に格納した後、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; ?>";

グラフ関数の場合、私は持っています

  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 で実行しましたが、グラフが広くなると 1 行に収まるように見えました。

いくつかのオプションがあります。

チャートの幅を広げることもできますが、すでに 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 に答える