Javascript 如何将RGBA颜色添加到google折线图？_Javascript_Html_Css_Charts_Google Visualization

Javascript 如何将RGBA颜色添加到google折线图？

javascript html css charts google-visualization

Javascript 如何将RGBA颜色添加到google折线图？,javascript,html,css,charts,google-visualization,Javascript,Html,Css,Charts,Google Visualization,我正在尝试将google折线图嵌入到客户端的网站中，该网站将在运行时基于一些php变量生成。我所面临的问题是，我使用的图表的父级背景（保存图表的背景）是rgba（0,0,0,7）格式，它给背景一种透明的感觉，而不是内容，而google api提供的背景是白色的，我试图更改背景的颜色，但它接受十六进制值“#000”，这并不能提供透明度。有人能给谷歌图表提供一个rgba（）颜色的方法吗。很抱歉，我不能分享确切的代码，但下面可以作为参考 <html> <head>

我正在尝试将google折线图嵌入到客户端的网站中，该网站将在运行时基于一些php变量生成。我所面临的问题是，我使用的图表的父级背景（保存图表的背景）是rgba（0,0,0,7）格式，它给背景一种透明的感觉，而不是内容，而google api提供的背景是白色的，我试图更改背景的颜色，但它接受十六进制值“#000”，这并不能提供透明度。有人能给谷歌图表提供一个rgba（）颜色的方法吗。很抱歉，我不能分享确切的代码，但下面可以作为参考

  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      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]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' },
          backgroundColor:'#000';
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”]，
['2004',  1000,      400],
['2005',  1170,      460],
['2006',  660,       1120],
['2007',  1030,      540]
]);
变量选项={
标题：“公司业绩”，
curveType:'函数'，
图例：{位置：'bottom'}，
背景颜色：“#000”；
};
var chart=new google.visualization.LineChart（document.getElementById（'curve_chart'）；
图表绘制（数据、选项）；
}

我看了一遍，但找不到我问题的答案。请建议一个简单的解决方法。

试试

    backgroundColor: {
      'fill': '#000',
      'fillOpacity': 0.1 
    },

这将使用十六进制颜色和不透明的透明


google.charts.load（'current'{
“包”：[“核心图表”]
});
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”]，
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
变量选项={
标题：“公司业绩”，
curveType:'函数'，
图例：{
位置：'底部'
},
背景颜色：{
“填充”：“000”，
“fillOpacity”：0.1
},
};
var chart=new google.visualization.LineChart（document.getElementById（'curve_chart'）；
图表绘制（数据、选项）；
}


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”]，
['2004',  1000,      400],
['2005',  1170,      460],
['2006',  660,       1120],
['2007',  1030,      540]
]);
变量选项={
标题：“公司业绩”，
curveType:'函数'，
图例：{位置：'bottom'}，
背景颜色：'透明'，
};
var chart=new google.visualization.LineChart（document.getElementById（'curve_chart'）；
图表绘制（数据、选项）；
}

在此尝试此代码。我已在选项中将backgroundColor设置为透明，并将inline style设置为RGBA颜色，颜色将反映。我希望插入RGBA（）颜色代码，我希望图表具有不同的颜色代码，我不想使背景色透明。据我所知，这将使整个图表变得透明，而不仅仅是背景。同时，根据我的理解，属性在

backgroundColor

下定义，它将应用于背景，它将变得透明，而不是整个图表。希望你得到答案并在这里添加。这将有助于社区很好地回答在系列颜色中使用rgba的价值。。。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      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]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' },
          backgroundColor:'transparent',
        };
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px;background:rgba(0,0,0,0.7)"></div>
  </body>
</html>