Javascript 让chart.js饼图中的一个切片变厚

const config: ChartConfiguration = {
  type: 'doughnut',
  data: {
    labels: ['Red', 'Blue'],
    datasets: [
      {
        hoverOffset: 24,
        backgroundColor: ['rgb(255, 9, 132)', 'rgb(54, 162, 235)'],
        borderWidth: 0,
        label: '# of Points',
        data: [75, 25],
      },
    ],
  },
  options: {
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        mode: 'index',
        intersect: false,
        position: 'nearest',
      },
    },
    scales: {
      y: {
        min: 0,
        max: 20,
      },
    },
  },
};
new Chart(ctx, config);

borderWidth: [10, 0]

new Chart('chart', {
  type: 'doughnut',
  data: {
    labels: ['Red', 'Blue'],
    datasets: [{
      hoverOffset: 24,
      backgroundColor: ['rgb(255, 9, 132)', 'rgb(54, 162, 235)'],
      borderWidth: [10, 0],
      hoverBorderColor: 'white',
      label: '# of Points',
      data: [75, 25]
    }]
  },
  options: {
    responsive: false,
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        displayColors: false // hides the colored box polluted by hoverBorderColor
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="chart" width="200"></canvas>

Javascript相关问答推荐

如何提取Cypress中文本

RxJS setTimeout操作符等效

如何在不创建新键的情况下动态更改 map 中的项目？

Spring boot JSON解析错误：意外字符错误

如何为我的astro页面中的相同组件自动创建不同的内容？

为什么！逗号和空格不会作为输出返回，如果它在参数上？

如何调用名称在字符串中的实例方法？

Web Crypto API解密失败，RSA-OAEP

WP Bootstrap NavWaker：下拉菜单一次打开所有下拉菜单

基于props 类型的不同props ，根据来自接口的值扩展类型

Puppeteer上每页的useProxy返回的不是函数/构造函数

JS Animate()方法未按预期工作

匹配一个或多个可选重复的特定模式

每隔3个项目交替显示，然后每1个项目交替显示

如何让SVG图标在被点击和访问后改变 colored颜色 ，并在被访问后取消点击时恢复到原来的 colored颜色 ？

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

在范围数组中查找公共(包含)范围

如何用react组件替换dom元素？

如何从嵌套的json中获取最大值

Js问题：有没有办法将数据从标记表转换成图表？