Question

我在StackOverflow上看到了之前的一些问题/答案但这些答案中提供的代码似乎都不起作用用我的图表：这是我的代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1.1", {packages:["bar"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Sales', 'Expenses'],
      ['January', 200, 150],
      ['February', 1170, 460],
      ['March', 660, 1120],
      ['April', 1030, 540],
      ['May', 1030, 540],
      ['June', 1030, 540]
    ]);

    var options = {

          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: May-August',
            backgroundColor: '#fcfcfc',
          }

    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, options);
  }
</script>

html div代码：

<div id="columnchart_material" style="width: 650px; height: 500px;"></div>

问题是我想将背景从白色变为浅灰色而我似乎无法通过声明backgroundColor来使其工作：＆＃34;＃fcfcfc＆＃39; 内部选项{}

还有其他方法可以在该图表上声明背景颜色我想也许我使用的图表类型可能无法改变它背景颜色。

我还尝试将backgroundColor变量指定为函数（后跟大括号backgroundColor {color：＆＃39;＃fcfcfc＆＃39;} 但这在我的图表上也没有。

任何帮助都将受到高度赞赏。谢谢

jsFiddle：http://jsfiddle.net/mtypsnqy/

Answer 1

首先，您已将chart:{}放在错误的位置。您已经在chartArea内定义了它，而您应该在任何对象之外或var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: May-August' }, backgroundColor: '#fcfcfc' };内部执行此操作，如：

var options = {
   chart: {
     title: 'Company Performance',
     subtitle: 'Sales, Expenses, and Profit: May-August'
   },
   chartArea:{
      backgroundColor: '#fcfcfc'
  }
};

这将导致包含图表的整个div为深灰色或类似：

chart.draw(data, options);

只会使两个轴中包含的区域显示为红色。

最后你必须改变你的

chart.draw(data, google.charts.Bar.convertOptions(options));

到

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            html, body, form
            {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .chartContainer
            {
                width: 50%;
                height: 50%;
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="Scriptmanager1" runat="server" />
            <div class="chartContainer">
                <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="100%">
                    <PlotArea>
                        <Series>
                            <telerik:AreaSeries>
                                <SeriesItems>
                                    <telerik:CategorySeriesItem Y="1" />
                                    <telerik:CategorySeriesItem Y="2" />
                                    <telerik:CategorySeriesItem Y="4" />
                                    <telerik:CategorySeriesItem Y="3" />
                                </SeriesItems>
                            </telerik:AreaSeries>
                        </Series>
                    </PlotArea>
                </telerik:RadHtmlChart>
                <script>
                    function resizeChart() {
                        //repaint the chart - will play animations
                        //$find("<%=RadHtmlChart1.ClientID%>").repaint();
                        //only resizes the chart - will not play animations
                        $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget().resize();
                    }
                    var TO = false;
                    $telerik.$(window).resize(function () {
                        if (TO !== false)
                            clearTimeout(TO);
                        TO = setTimeout(resizeChart, 200); //200 is time in miliseconds
                    });
                </script>
            </div>
        </form>
    </body>
</html>

在Bar Charts API page上指定。

我让你成为一个小提琴，并看到差异：Link

谷歌图表改变背景颜色

1 个答案: