谷歌线图表背景颜色填充按图像

时间:2013-05-29 13:24:54

标签: charts google-visualization

我对下面的Google折线图感到困惑的是图片,它解释了我需要更改哪种颜色enter image description here

我正在使用以下代码。

<script type="text/javascript">
   google.setOnLoadCallback(drawDiscreteChart);




   function drawDiscreteChart() {
                        // Create and populate the data table.
                        var data = new google.visualization.DataTable();
                        data.addColumn('string', 'Date');
                        data.addColumn('number', 'R$');
                        data.addRows([
                           ['Apr/13', 13000000],
                           ['May/13', 12934520.8],
                           ['Jun/13', 12869121.47],
                           ['Jul/13', 12803801.59]
                         ]);

                        var options = {
                          title: '',
                          legend: {position: 'none'},
                          backgroundColor: '#1C1C1C',
                          vAxis: {title: '', minValue: 0, maxValue: 25, gridlines: {color: '212121'},textStyle:{color: 'fff',fontSize:10}},
                          hAxis:{textStyle:{color: 'fff',fontSize:10},slantedTextAngle:90},
                          bubble: {textStyle: {fontSize: 13}},
                          series: {0:{color:'ffffff',lineWidth:1}},
                          sizeAxis: {minValue: 11, maxSize: 11, maxValue: 11, minSize: 11},
                        };

                        // Create and draw the visualization.
                        var chart = new google.visualization.AreaChart(document.getElementById('discrete_chart'));
                        chart.draw(data, options);
                      }

                          </script>

任何人都可以帮我这个..

1 个答案:

答案 0 :(得分:0)

经过2天的R&amp; D我得到了解决方案

<script type="text/javascript">
                  google.setOnLoadCallback(drawDiscreteChart);

                  function drawDiscreteChart() {
                    // Create and populate the data table.
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Date');
                    data.addColumn('number', 'R$');
                    data.addRows([
                       ['Apr/13', 13000000],
                       ['May/13', 12934520.8],
                       ['Jun/13', 12869121.47],
                       ['Jul/13', 12803801.59]
                     ]);

                    var options = {
                      title: '',
                      legend: {position: 'none'},
                      backgroundColor: '#1C1C1C',
                      vAxis: {title: '', minValue: 0, maxValue: 25, gridlines: {color: '212121'},textStyle:{color: 'fff',fontSize:10}},
                      hAxis:{textStyle:{color: 'fff',fontSize:10},slantedTextAngle:90},
                      bubble: {textStyle: {fontSize: 13}},
                      series: {0:{color:'green',lineWidth:1}},
                      sizeAxis: {minValue: 11, maxSize: 11, maxValue: 11, minSize: 11},
                    };

                    // Create and draw the visualization.
                    var chart = new google.visualization.AreaChart(document.getElementById('discrete_chart'));
                    chart.draw(data, options);
                  }

                      </script>

在代码系列中:{0:{color:'green',lineWidth:1}},您需要指定颜色......