Se poate specifica culoarea unei bucati de grafic in functie de valoarea itemului reprezentat?

(Tamer Altıntop) #1

In documentatie, un exemplu in care specifici culorile graficului este:

<script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>

Insa e doar o lista astfel ca primul item din chart va avea prima culoare, s.a.m.d. Fac un grafic cu sarcini(terminate, in progress, neincepute) si deci as vrea sa dau fiecarui item o culoare specifica in functie de valoarea statusului lui.

Ceva idei?

(George Calianu) #2

Daca nu gresesc tu vrei ceva ce se numeste { role: "style" } si care in unele charturi de la Google exista (eg. ColumnChart) dar nu functioneaza in PieChart :frowning_face:
Totusi nu cred ca e foarte greu sa le duci in options:slices.

(István F.) #3

Da, se poate,

Folosesti variabile cu obiecte in options :

        let culoareStare = {
                terminate: { color: calculeazaCuloare(Sarcini, 'terminate') },
                inProgress: { color: calculeazaCuloare(Sarcini, 'inprogres')}
               
        }
        slices: {
            0: culoareStare.terminate,
            1: culoareStare.inProgress
          }

si chemi chart.draw(data,options) cand se schimba ceva. Eventual poti folosi culoareStare[‘terminate/inProgress’] cu culoareStare[stareaCurenta] in loc de culoareStare.x.

Poti converti un array intr-un obiect cu

let obiectulX = Object.assign({}, [{color: 'red'}, {color: 'blue' }]);

Ca sa obtii { 0: {color: “red”} , 1: {color: “blue”} }

1 Like