如何解决如何使谷歌可视化饼图切片圆边
我想让图表看起来像这样我把饼图切片是唯一让饼图边缘变圆的问题
google.charts.load("current",{packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = [
['Task','Hours'],['Gas',6.5],20],8.5],7],[null,50.0]
];
var total = 0;
for (var i = 1; i < data.length; i++) {
if (data[i][0] !== null) {
total += data[i][1];
}
}
var numberFormat = new google.visualization.NumberFormat({
pattern: '#,##0.0',suffix: '%'
});
var dataTable = new google.visualization.arrayToDataTable(data);
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
if (dataTable.getValue(i,0) !== null) {
dataTable.setFormattedValue(i,1,numberFormat.formatValue(((dataTable.getValue(i,1) / total) * 100)));
}
}
var opts = {
backgroundColor: 'transparent',pieSliceBorderColor: 'transparent',legend: 'none',tooltip: { trigger: 'none' },pieSliceText: 'value',pieSliceTextStyle: {color: '#14121F',fontSize: 14 },pieHole: 0.01,chartArea: {left:40,top:70,bottom:0,right:40,width:'100%',height:'100%'},slices: {
[data.length - 2]: {
color: 'transparent',textStyle: {color: 'transparent'}
},0:{offset: 0.1,color:'#6BE2FF'},1:{offset: 0.1,color:'#4F9FE3'},2:{offset: 0.1,color:'#FFFFFF'},3:{offset: 0.1,color:'#EB2027'},4:{offset: 0.1,color:'#ACACBD'},},pieStartAngle: 270,};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(dataTable,opts);
}
body {background: #000}
.piechart {width: 500px; height: 500px}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" class="pie-chart"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。