Google饼图中的圆角

时间:2018-08-30 12:41:33

标签: javascript charts google-visualization donut-chart

是否可以在Google图表(饼图)中将一个数据集的边缘弄圆?

我想要类似的东西:

enter image description here

现在,我知道可以使用chart.js或大多数其他图表插件来实现此目的。但我正在Google Charts插件中寻找解决方案。任何帮助将不胜感激。

这是我到目前为止所拥有的:

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

google.charts.load('visualization', '1');

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Content', 'Size'],
    ['Green', 70],
    ['Grey', 30]
  ]);

  var options = {
    width: 250,
    height: 250,
    title: "",
    pieHole: 0.8,
    pieSliceBorderColor: "none",
    colors: ['#71B55D', '#eaeaea'],
    chartArea: {
     width: '85%',
     height: '85%'
    },
    legend: {
      position: "none"
    },
    pieSliceText: "none",
    tooltip: {
      trigger: "none"
    }
  };

  var donutChart = new google.visualization
   .PieChart(document.getElementById('donut-chart'));

  donutChart.draw(data, options);
}

JSFiddle链接-http://jsfiddle.net/jv25s9aL/4/

0 个答案:

没有答案