javascript - 我想使用这个饼图,但如何将背景颜色从白色更改为灰色

标签 javascript html

我想使用这个饼图,但如何将背景颜色从白色更改为灰色(rgb(226, 226, 226))。有可能吗?饼图来自https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_pie_chart .

<html lang="en-US">
<body>

<h1>My Pie Chart</h1>

<div id="piechart"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Work', 8],
  ['Eat', 2],
  ['TV', 4],
  ['Gym', 2],
  ['Sleep', 8]
]);

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'My Average Day', 'width':550, 'height':400};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>

</body>
</html>

最佳答案

我刚刚将背景颜色添加到绘图选项backgroundColor: { fill: "#e2e2e2"}

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

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Work', 8],
  ['Eat', 2],
  ['TV', 4],
  ['Gym', 2],
  ['Sleep', 8]
]);

  // Optional; add a title and set the width and height of the chart
  var options = {
    'title':'My Average Day', 
    'width':550, 
    'height':400,
    backgroundColor: { fill: "#e2e2e2" }
  };

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
<html>
<body>
<h1>My Pie Chart</h1>

<div id="piechart"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</body>
</html>

关于javascript - 我想使用这个饼图,但如何将背景颜色从白色更改为灰色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71681641/

相关文章:

javascript - 如何将 javascript 添加到 HTML 页面?

javascript - jQuery every - 绑定(bind)到所有元素而不是单个元素

javascript - 为什么变量被称为函数?

javascript - 如何阻止连接提前关闭?

php - 将我的 Codeigniter 项目移至另一台服务器以获得空白屏幕

javascript - 如何在滚动时显示 div/class/id

javascript - 如何使 'click' 事件在 div 下工作

Javascript 按字母顺序匹配字符串的开头,然后按字母顺序排列包含的文本

javascript - 更新禁用字段的表单记录

html - 固定 header 隐藏错误消息