Как изменить цвет круговой диаграммы, уже измененной с помощью Chart.js?

я пытаюсь изменить цвет уже обработанного фрагмента круговой диаграммы.

У меня есть жизнеспособный файл со всей информацией: данными, меткой, цветом, процентами и всем остальным.

теперь я хочу ввести данные или что-то еще, чтобы изменить цвет среза вchart.js

Это мой сырой код

      <body>
  <div style="display: inline-block;" class="areagraph"></div>//just filled by js with the elements  
</body>
<script>
    const allCharts = [
        { 
            name: "Gender",
            type: "pie",
            data: [
                { label: "Homem Trans", backgroundColor: "#213C64", data: 434, total: 2000, percentage:14.5 }
                  `Other Genders`
            ]
       
    ];

    allCharts.forEach(chart => {
    const containerchart = document.createElement('div');
    containerchart.classList.add('containerchart');

    const dataContainer = document.createElement('div');
    dataContainer.classList.add('data-table');

    const title = document.createElement('h1');
    title.textContent = chart.name + " in " + chart.type;

    const canvascontainerchart = document.createElement('div');
    canvascontainerchart.classList.add('graphContainer');

    const canvas = document.createElement('canvas');
    canvas.id = 'pie-chart-' + chart.name.toLowerCase().replace(/\s/g, '-');
    canvascontainerchart.appendChild(canvas);

    const table = document.createElement('table');
    table.classList.add('table', 'table-bordered', 'table-hover');
    const thead = document.createElement('thead');
    const tbody = document.createElement('tbody');

    const theadRow = document.createElement('tr');
    const thColor = document.createElement('th');
    thColor.textContent = 'Cor'; // Nome da coluna de cor
    const thName = document.createElement('th');
    thName.textContent = chart.name;
    const thNumber = document.createElement('th');
    thNumber.textContent = 'Number';
    const thPercentage = document.createElement('th');
    thPercentage.textContent = 'Percentage';
    theadRow.appendChild(thColor);
    theadRow.appendChild(thName);
    theadRow.appendChild(thNumber);
    theadRow.appendChild(thPercentage);
    thead.appendChild(theadRow);

    chart.data.forEach(item => {
      const tbodyRow = document.createElement('tr');
      const tdColor = document.createElement('td');
      const colorDiv = document.createElement('div');
      colorDiv.style.width = '20px'; // Largura da div redonda
      colorDiv.style.height = '20px'; // Altura da div redonda
      colorDiv.style.borderRadius = '50%'; // Forma redonda
      colorDiv.style.backgroundColor = item.backgroundColor; // Cor de fundo correspondente
      tdColor.appendChild(colorDiv);
      
      const tdName = document.createElement('td');
      tdName.textContent = item.label;
      const tdNumber = document.createElement('td');
      tdNumber.textContent = item.data;
      const tdPercentage = document.createElement('td');
      const percentage = item.percentage;
      tdPercentage.textContent = percentage + '%';
      tbodyRow.appendChild(tdColor);
      tbodyRow.appendChild(tdName);
      tbodyRow.appendChild(tdNumber);
      tbodyRow.appendChild(tdPercentage);
      tbody.appendChild(tbodyRow);
    });

    table.appendChild(thead);
    table.appendChild(tbody);


    dataContainer.appendChild(table);
    
    /* Graph */
    containerchart.appendChild(canvascontainerchart);

    /* Table */
    containerchart.appendChild(dataContainer);

    const areagraphDiv = document.querySelector('.areagraph');

    areagraphDiv.appendChild(containerchart);

    // document.body.appendChild(containerchart);      
      
      new Chart(canvas, {
              type: chart.type,
              data: {
                labels: chart.data.map(item => item.label),
                datasets: [{
                  backgroundColor: chart.data.map(item => item.backgroundColor),
                  data: chart.data.map(item => item.percentage), // Use the raw percentage values
                }],
              },
              options: {
                plugins: {
                  title: {
                    text: chart.name,
                    display: true,
                    fullSize: true,
                    font: {
                      size: 30,
                    },
                  },
                  tooltip: {
                    callbacks: {
                      label: (percentage) => {
                        return percentage.value + "%"; // Append "%" to the tooltip label
                      },
                    },
                  },
                },
                responsive: true,
              },
    });

</script>

Ну, это показывает, как я выполняю свою работу. выберите цвет из свойства BackgroundColor.

Источник

0 ответов

Другие вопросы по тегам