谷歌折線圖

Question

我想在新的網絡項目中使用Google折線圖。 我想像下面這張圖片在下面的第二張圖表中所示對它們進行樣式設置。

你能告訴我怎么做嗎？

這是生成上面圖表的代碼（我有意刪除了一些數據以使代碼更小）。

  <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Server load'],
           ['Wed Oct 29 08:56:08 CDT 2014', 3.11],
           ['Wed Oct 29 09:04:02 CDT 2014', 1.66],
           ['Wed Oct 29 09:08:02 CDT 2014', 2.76],
           ['Wed Oct 29 09:12:04 CDT 2014', 4.46],
           ['Fri Oct 31 10:16:03 CDT 2014', 0.52],
           ['Fri Oct 31 10:20:02 CDT 2014', 0.36],
           ['Fri Oct 31 10:24:02 CDT 2014', 0.25]
        ]);

        var options = {
          title: 'Server load (48 hours)',
          curveType: 'function',
          vAxis: {minValue:0},
          backgroundColor: '#F2F9FF',
           explorer: { actions: ['dragToZoom', 'rightClickToReset'] },
           fontName: 'Verdana',
           legend: 'none'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
    <div id="chart_div" style="width: 950px; height: 180px;"></div>

Answer 1

您可以使用backgroundColor.stroke來應用邊框。 似乎可以使用hAxis設置日期樣式。 您可以使用chg參數在圖表上指定實心或虛線網格線。 此參數不允許您指定線條的粗細或顏色。 有關在圖表上繪制線條的更多方法，請參見形狀標記（chm類型h，H，v或V），范圍標記（chm）和軸刻度線（chxtc）。