谷歌图表背景颜色

发布于 2024-12-25 17:52:46 字数 211 浏览 5 评论 0原文

我正在使用 javascript api 设计谷歌图表。我想更改绘制数据的区域的背景。由于某种原因，当我像这样设置背景选项时：

chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })

它改变了整个图表的背景，而不是绘制数据的区域。关于如何仅更改绘制区域的背景有什么想法吗？谢谢

原文

I'm styling a google chart using the javascript api. I want to change the background of the area where the data is plotted. For some reason when I set background options like so:

chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })

It changes the the background of the whole chart and not the area where the data is plotted. Any ideas on how to only change the background of the plotted area?
Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小傻瓜 2025-01-01 17:52:46

像这样传递选项

var options = {
    title: 'title',
    width: 310,
    height: 260,
    backgroundColor: '#E4E4E4',
    is3D: true
};

pass the options like this

var options = {
    title: 'title',
    width: 310,
    height: 260,
    backgroundColor: '#E4E4E4',
    is3D: true
};

回复收藏 0 原文

往事风中埋 2025-01-01 17:52:46

将其添加到您的选项中：

'chartArea': {
    'backgroundColor': {
        'fill': '#F4F4F4',
        'opacity': 100
     },
 }

add this to your options:

'chartArea': {
    'backgroundColor': {
        'fill': '#F4F4F4',
        'opacity': 100
     },
 }

回复收藏 0 原文

南渊 2025-01-01 17:52:46

正确的答案是，这取决于它是经典的 Google 图表还是 Material Google 图表。如果您使用经典版本的 Google Charts，则上述多个建议都有效。但是，如果您使用较新的 Material 类型 Google 图表，则必须以不同方式指定选项，或对其进行转换（请参阅下面的 google.charts.Bar.convertOptions(options)）。除此之外，在材质图表的情况下，如果您为整个图表指定不透明度，则该不透明度（仅）将不适用于图表区域。因此，即使对于相同的颜色组合，您也需要显式指定图表区域的颜色和不透明度。

一般来说：Google 图表的材料版本缺乏经典版所具有的一些功能（倾斜轴标签、趋势线、自定义列着色、组合图表等等），反之亦然：数字格式和双（三、四重轴，...) 仅受材质版本支持。

如果两者都支持某个功能，则材料图表有时需要不同的选项格式。

<body>
  <div id="classic_div"></div>
  <div id="material_div"></div>
</body>

JS：

  google.charts.load('current', { 'packages': ['corechart', 'bar'] });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,    400],
      ['2005',  1170,    460],
      ['2006',   660,   1120],
      ['2007',  1030,    540],
      ['2009',  1120,    580],
      ['2010',  1200,    500],
      ['2011',  1250,    490],
    ]);
    var options = {
      width: 1000,
      height: 600,
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017'
      },
      // Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
      // for that use fillOpacity versions
      // Colors only the chart area, simple version
      // chartArea: {
      //   backgroundColor: '#FF0000'
      // },
      // Colors only the chart area, with opacity
      chartArea: {
        backgroundColor: {
          fill: '#FF0000',
          fillOpacity: 0.1
        },
      },
      // Colors the entire chart area, simple version
      // backgroundColor: '#FF0000',
      // Colors the entire chart area, with opacity
      backgroundColor: {
        fill: '#FF0000',
        fillOpacity: 0.8
      },
    }

    var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
    classicChart.draw(data, options);

    var materialChart = new google.charts.Bar(document.getElementById('material_div'));
    materialChart.draw(data, google.charts.Bar.convertOptions(options));
  }

小提琴演示： https://jsfiddle.net/csabath/v3h9ycd4/2/

The proper answer is that it depends if it is classic Google Charts or Material Google Charts. If you use classic version of the Google Charts, multiple of the above suggestion work. However if you use newer Material type Google charts then you have to specify the options differently, or convert them (see google.charts.Bar.convertOptions(options) below). On top of that in case of material charts if you specify an opacity for the whole chart, the opacity (only) won't apply for the chart area. So you need to explicitly specify color with the opacity for the chart area as well even for the same color combination.

In general: material version of Google Charts lack some of the features what the Classic has (slanted axis labels, trend lines, custom column coloring, Combo charts to name a few), and vica versa: the number formating and the dual (triple, quadruple, ...) axes are only supported with the Material version.

In case a feature is supported by both the Material chart sometimes requires different format for the options.

<body>
  <div id="classic_div"></div>
  <div id="material_div"></div>
</body>

JS:

  google.charts.load('current', { 'packages': ['corechart', 'bar'] });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,    400],
      ['2005',  1170,    460],
      ['2006',   660,   1120],
      ['2007',  1030,    540],
      ['2009',  1120,    580],
      ['2010',  1200,    500],
      ['2011',  1250,    490],
    ]);
    var options = {
      width: 1000,
      height: 600,
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017'
      },
      // Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
      // for that use fillOpacity versions
      // Colors only the chart area, simple version
      // chartArea: {
      //   backgroundColor: '#FF0000'
      // },
      // Colors only the chart area, with opacity
      chartArea: {
        backgroundColor: {
          fill: '#FF0000',
          fillOpacity: 0.1
        },
      },
      // Colors the entire chart area, simple version
      // backgroundColor: '#FF0000',
      // Colors the entire chart area, with opacity
      backgroundColor: {
        fill: '#FF0000',
        fillOpacity: 0.8
      },
    }

    var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
    classicChart.draw(data, options);

    var materialChart = new google.charts.Bar(document.getElementById('material_div'));
    materialChart.draw(data, google.charts.Bar.convertOptions(options));
  }

Fiddle demo: https://jsfiddle.net/csabatoth/v3h9ycd4/2/

回复收藏 0 原文

若无相欠,怎会相见 2025-01-01 17:52:46

使用选项更容易。

drawChart() {
    // Standard google charts functionality is available as GoogleCharts.api after load
    const data = GoogleCharts.api.visualization.arrayToDataTable([
        ['Chart thing', 'Chart amount'],
        ['Na Meta', 50],
        ['Abaixo da Meta', 22],
        ['Acima da Meta', 10],
        ['Refugos', 15]
    ]);

    let options = {
      backgroundColor: {
        gradient: {
          // Start color for gradient.
          color1: '#fbf6a7',
          // Finish color for gradient.
          color2: '#33b679',
          // Where on the boundary to start and
          // end the color1/color2 gradient,
          // relative to the upper left corner
          // of the boundary.
          x1: '0%', y1: '0%',
          x2: '100%', y2: '100%',
          // If true, the boundary for x1,
          // y1, x2, and y2 is the box. If
          // false, it's the entire chart.
          useObjectBoundingBoxUnits: true
        },
      },
    };

    const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
    chart.draw(data, options);
}

我正在使用聚合物，这就是我使用 this.$.cart1 的原因，但您可以使用 selectedbyid，没问题。

It is easier using the options.

drawChart() {
    // Standard google charts functionality is available as GoogleCharts.api after load
    const data = GoogleCharts.api.visualization.arrayToDataTable([
        ['Chart thing', 'Chart amount'],
        ['Na Meta', 50],
        ['Abaixo da Meta', 22],
        ['Acima da Meta', 10],
        ['Refugos', 15]
    ]);

    let options = {
      backgroundColor: {
        gradient: {
          // Start color for gradient.
          color1: '#fbf6a7',
          // Finish color for gradient.
          color2: '#33b679',
          // Where on the boundary to start and
          // end the color1/color2 gradient,
          // relative to the upper left corner
          // of the boundary.
          x1: '0%', y1: '0%',
          x2: '100%', y2: '100%',
          // If true, the boundary for x1,
          // y1, x2, and y2 is the box. If
          // false, it's the entire chart.
          useObjectBoundingBoxUnits: true
        },
      },
    };

    const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
    chart.draw(data, options);
}

I'm using polymer that's why i'm using this.$.cart1, but you can use selectedbyid, no problem.

回复收藏 0 原文

埋情葬爱 2025-01-01 17:52:46

您是否尝试过使用背景颜色.笔划和背景颜色.笔画宽度？

请参阅 Google 图表文档。

回复收藏 0 原文

南街女流氓 2025-01-01 17:52:46

如果你想这样做，那么它会有所帮助。我在 Google 库的组合图中使用了阶梯面积图表...
其中每个阶梯区域的值是刻度值。

这是jsfiddle代码的链接

回复收藏 0 原文

早乙女 2025-01-01 17:52:46

只需在此处添加背景选项即可

  backgroundColor: {
        fill:'red'     
        },

使用小提琴链接 https://jsfiddle.net/amitjain/q3tazo7t/

Simply add background option

  backgroundColor: {
        fill:'red'     
        },

here is the fiddle link https://jsfiddle.net/amitjain/q3tazo7t/

回复收藏 0 原文

暖心男生 2025-01-01 17:52:46

您只需要输入 backgroudColor: 'yourColor' 例如：

var options = {
title: 'title',
width: 300,
height: 200,
backgroundColor: '#fff',};

you only need to put backgroudColor: 'yourColor' Ex:

var options = {
title: 'title',
width: 300,
height: 200,
backgroundColor: '#fff',};

回复收藏 0 原文

孤星 2025-01-01 17:52:46

您只需使用 CSS 即可做到：

#salesChart svg > rect {  /*#salesChart is ID of your google chart*/
    fill: #F4F4F4;
}

You can do it just with CSS:

#salesChart svg > rect {  /*#salesChart is ID of your google chart*/
    fill: #F4F4F4;
}

回复收藏 0 原文

~没有更多了~

关于作者

卸妝后依然美

暂无简介

文章

483 人气

关注发私信

友情链接

文江博客

谷歌图表背景颜色

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

谷歌图表背景颜色

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。