1

上記のタイトルのように、理由を知っている人はいますか? 私のコードは次のとおりです。ちなみに、Google Chart Playground を使用してテストしています http://code.google.com/apis/ajax/playground/?type=visualization#area_chart。アドバイスしてください、ありがとう！

<html>
   <head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Hour', 'Sales', 'Expenses'],
      ['0:00',  1000, 500],
      ['1:00',  1170, 604],
      ['2:00',  660, 302],
      ['3:00',  1030, 827],
      ['4:00', 1222, 86]
    ]);

    var options = {
      areaOpacity: 0.7,
      backgroundColor:{
        color: 'none',
        fill: 'none',
      },
      animation:{
        easing: 'inAndOut',
      },
      hAxis: {gridlines: {color: '#000000', count: 3}},
      vAxis: {gridlines: {color: '#DCDCDC', count: 5}},
      tooltipTextStyle: {color: '#444444', fontName: 'Tahoma', fontSize: 12},
      focusTarget: 'category',         
      series: {
        0:{color: '#207795', lineWidth: 4, pointSize: 10},
        1:{color: '#464A54', lineWidth: 4, pointSize: 10},
      },
      legend: 'none',
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

4

2 に答える 2

3

垂直グリッド線を取得するには、hAxis グリッド線を設定 (完了) し、x 軸のデータ型を連続データ型に変更する必要があります。軸/用語のカスタマイズと面グラフ: 構成オプション: hAxis.gridlines の説明を参照してください。

それ以外の

var data = google.visualization.arrayToDataTable([
  ['Hour', 'Sales', 'Expenses'],
  ['0:00',  1000, 500],
  ['1:00',  1170, 604],
  ['2:00',  660, 302],
  ['3:00',  1030, 827],
  ['4:00', 1222, 86]
]);

たとえば、次のように指定する必要があります。

var data = google.visualization.arrayToDataTable([
  ['Hour', 'Sales', 'Expenses'],
  [0,  1000, 500],
  [1,  1170, 604],
  [2,  660, 302],
  [3,  1030, 827],
  [4,  1222, 86]
]);

時間データはもはや文字列ではないことに注意してください。countの値を 5 に変更 hAxisすると、1 時間ごとに垂直線が表示されます。

ここに画像の説明を入力

于 2013-12-11T12:42:40.513 に答える
1

コードにエラーはありませんchart_div。マークアップを見逃しています..

    <div id="chart_div"></div>

デモを見る

http://jsfiddle.net/rathoreahsan/LE7V3/

于 2012-06-25T10:26:11.477 に答える