我想用这个饼图,但如何将背景 colored颜色 从白色改为灰色(rgb(226226226226226)).有可能吗?饼图是从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>

推荐答案

我刚刚在draw选项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相关问答推荐

Snowflake - .toISOString()错误地舍入JS存储过程中的时间戳

判断现代浏览器中的点击是否由touch 触发

使用reaction创建可排序的表不起作用

Python类实现的JavaScript吊坠是什么样子的?

用户单击仅在JavaScript中传递一次以及其他行为

reaction useEffect KeyDown for each 条目配音输出

序列查找器功能应用默认值而不是读取响应

我应该在redux reducer中调用其他reducer函数吗?

使用续集和下拉栏显示模型属性

给定一个凸多边形作为一组边,如何根据到最近边的距离填充里面的区域

无法检测卡片重叠状态的问题

Prisma具有至少一个值的多对多关系

为什么我的getAsFile()方法返回空?

将异步回调转换为异步生成器模式

如何在HTMX提示符中设置默认值?

如何防止ionic 输入中的特殊字符.?

使用Document.Evaluate() Select 一个包含撇号的HTML元素

为什么延迟在我的laravel项目中不起作用?

使用API调用的VUE 3键盘输入同步问题

与在编剧中具有动态价值的定位器交互