可以使用chart.js更改悬停时的馅饼切片形状吗?

时间:2018-11-09 15:05:56

标签: javascript canvas chart.js

我需要创建一个甜甜圈图,并且需要一个更大的切片,例如以下示例:https://imgur.com/a/9EoKemT

您会看到绿色部分具有较大的阴影形状……

据我所知没有设置此选项的方法..还有办法吗?

我尝试了borderWidth,圆周,hoverBorderWidth等选项,但它们没有实现我想要的功能。

是否可以自定义一片甜甜圈?

谢谢

const PieChart = () => {
  const data = {
    labels: ["TOTAL AMOUNT OF PC'S", 'TOTAL AMOUNT OF  MAC'],
    datasets: [{
      label: '# of Votes',
      data: [4, 9],
      backgroundColor: [
        '#dfdfdf',
        '#49a5a5',
      ],
      borderWidth: 0,
    }],
  };

    const options = {
    legend: false,
    maintainAspectRatio: false,
    tooltips: {
      enabled: true,
      backgroundColor: '#fff',
      bodyFontColor: '#000',
      caretSize: 0,
      cornerRadius: 0,
      borderWidth: 0,
      mode: 'single',
      titleFontColor: '#000',
      callbacks: {
        label: (datasetIndex, dat) => {
          const total = dat.datasets[0].data[0] + dat.datasets[0].data[1];
          const currentvalue = dat.datasets[0].data[datasetIndex.index];
          const percentage = (currentvalue / total) * 100;
          return percentage.toFixed(1);
        },
        title: (tooltipItem, dato) => dato.labels[tooltipItem[0].index],
      },
    },
  };

0 个答案:

没有答案