谷歌折线图

Question

I want to use google line charts in my new web project. I want to style them like is shown on this picture below in 2th chart below.

Could you tell me how to do that if is possible?

This is the code which is generating the chart above ( I have intentionally removed some data to make the code smaller ).

  <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

You could apply the border with backgroundColor.stroke. It appears that hAxis could be used to style your dates. You can specify solid or dotted grid lines on your chart using the chg parameter. This parameter doesn't let you specify the thickness or color of the lines. For more ways to make lines across your chart, see shape markers (chm type h, H, v, or V), range markers (chm), and axis tick marks (chxtc).