Início / coding / Perguntas / 78050833
Accepted
Ole
Asked: 2024-02-24 08:30:58 +0800 CST

Tornando uma das fatias de um gráfico de pizza chart.js mais espessa?

  • 772

É possível tornar uma fatia de um gráfico de rosca chart.js mais espessa que o restante das fatias?

Por exemplo, nesta demonstração do Stackblitz, é possível tornar a fatia azul 25% mais espessa que a fatia roxa?

Este é o código da demonstração.


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);
javascript

1 respostas

  1. Best Answer

    Você pode definir borderWithcomo uma matriz de valores onde cada valor corresponde a uma fatia específica.

    borderWidth: [10, 0]

    Por favor, dê uma olhada no seu código alterado e veja como ele funciona.

    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>

    • 1

relate perguntas