造型谷歌折线图答案

【问题标题】：Stlying google line chart造型谷歌折线图
【发布时间】：2014-12-27 23:49:47
【问题描述】：

我想在我的新网络项目中使用谷歌折线图。我想设置它们的样式，如下图第二张图所示。

如果可能的话，你能告诉我怎么做吗？

这是生成上面图表的代码（我故意删除了一些数据以使代码更小）。

  <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>

【问题讨论】：

标签： javascript charts

【解决方案1】：

您可以使用 backgroundColor.stroke 应用边框。看来 hAxis 可用于设置日期样式。您可以使用 chg 参数在图表上指定实线或虚线网格线。此参数不允许您指定线条的粗细或颜色。有关在图表上绘制线条的更多方法，请参阅形状标记（chm 类型 h、H、v 或 V）、范围标记 (chm) 和轴刻度线 (chxtc)。

【讨论】：