Fatal编程技术网
  • charts/
  • Charts 谷歌图表背景色

Charts 谷歌图表背景色

charts google-visualization

Charts 谷歌图表背景色,charts,google-visualization,Charts,Google Visualization,我正在使用javascript api设计google图表的样式。我想更改数据打印区域的背景。出于某种原因，当我设置如下背景选项时： chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } }) 它改变了整个图表的背景，而不是绘制数据的区域。关于如何只更改打印区域的背景，有什么想法吗？ 谢谢您是否尝试过使用backgroundcolor.stroke和backgroundcolor.strokewidth 请参阅。像这样传递选项 var

我正在使用javascript api设计google图表的样式。我想更改数据打印区域的背景。出于某种原因，当我设置如下背景选项时：

chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })
它改变了整个图表的背景，而不是绘制数据的区域。关于如何只更改打印区域的背景，有什么想法吗？
谢谢

您是否尝试过使用
backgroundcolor.stroke
和
backgroundcolor.strokewidth

请参阅。

像这样传递选项

var options = {
    title: 'title',
    width: 310,
    height: 260,
    backgroundColor: '#E4E4E4',
    is3D: true
};
将此添加到您的选项中：

'chartArea': {
    'backgroundColor': {
        'fill': '#F4F4F4',
        'opacity': 100
     },
 }
只需添加背景选项

  backgroundColor: {
        fill:'red'     
        },
这里是fiddle链接

正确的答案是，这取决于它是经典谷歌图表还是材料谷歌图表。若你们使用谷歌图表的经典版本，以上建议中的多个都会起作用。但是，如果使用较新的材质类型Google charts，则必须以不同的方式指定选项，或对其进行转换（请参见下面的
Google.charts.Bar.convertOptions（options）
）。在材质图表的情况下，如果为整个图表指定不透明度，则不透明度（仅）将不适用于图表区域。因此，即使对于相同的颜色组合，也需要使用图表区域的不透明度显式指定颜色

一般来说：谷歌图表的材质版本缺少经典版的一些功能（倾斜轴标签、趋势线、自定义列着色、组合图表等等），而vica则相反：只有材质版本才支持数字格式和双（三重、四重等）轴

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

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

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);
}
小提琴演示：

使用这些选项更容易

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

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);
}
我使用的是聚合物，这就是我使用这个的原因。$.cart1，但是你可以使用selectedbyid，没问题。

你可以用CSS来做：

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

如果你想这样做，那么它会有帮助。我在谷歌图书馆的组合图中使用了
阶梯区域
图。。。 其中，每个阶梯区域的值是刻度的值

这是我正在寻找的链接。仅在图表区域中使用背景色。谢谢：）这个例子展示了如何获得渐变。巫婆，我在努力纠正。