Wątek zablokowany 2015-06-01 14:25 przez dzek69.

Highcharts.js -> dynamiczne definiowanie koloru w Pie chart

2015-02-12 11:28
ne0
0

Hej,

korzystam z highcharts.js, dokładnie z wykresu kołowego. Z bazy danych pobieram listę w której mam nazwę koloru oraz ilość elementów z tym kolorem. To co chce uzyskać to wykres podzielony według tej ilości, nazwa każdego wycinka koła ma być taka jak nazwa koloru z listy, oraz kolor tego wycinka taki właśnie jak kolor.
No i teraz przykładowa lista wygląda tak:

 [Array[2], Array[2], Array[2]]
0: Objectname: "Amber"
    visible: true
    y: 13
1: Objectname: "Red"
    visible: true
    y: 2
2: Objectname: "Green"
    visible: true
    y: 3

Kolor Amber ma 13 elementów, kolor RED ma 2 i GREEN 3. No i teraz to mi się poprawnie wyświetla, ale nie wiem jak zrobić żeby wykres miał takie kolory jak te z "objectName".

Jak to ustawić?


Pomogłem? To dobrze :)
edytowany 1x, ostatnio: dzek69, 2015-02-12 11:35

Pozostało 580 znaków

2015-02-12 11:52
0

w dokumentacji masz podstawowy przyklad z ustwieniem kolorow takze => http://www.highcharts.com/demo/pie-donut .

a tutaj okrojona wersja pod Ciebie. pamietaj tylkoz e Amber to nie jest standardowa nazwa koloru w HTML wiec highchart wyswietli domyslnie czarna. Znajdz inna nazwe koloru lub uzyj HEX do wyrazania kolorow

Pozostało 580 znaków

2015-02-12 11:58
ne0
0

Problem, nie przemawia do mnie ten przykład: widziałem go i próbowałem to przeanalizować.
tak wygląda kod:

      var colors1 = {
                'Green': '#4b8e19',
                'Red': '#dd1d1d',
                'Amber': '#FFBA00'
            };

            var options = {
                chart: {
                    type: 'pie',
                    renderTo: 'personPkis'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><br/>Count: {point.y}'
                },
                title: {
                    text: 'Visits per project for: ' + personShortcut
                },

                series: [{
                    type: 'pie',
                    name: 'Project share',
                    data: dataForChart,
                    colors: 
                }]
            };

powiedz mi teraz jak w zależności od tego co jest w dataForChart (to co w pierwszym poście) odpowiednio pobrać i przypisać color z listy colors1


Pomogłem? To dobrze :)
edytowany 1x, ostatnio: ne0, 2015-02-12 11:58

Pozostało 580 znaków

2015-02-12 12:40

petla przejechac przez tablice i pobrac kolory wedle nazwy?? => http://jsfiddle.net/9b91r2d0/1/

Pozostało 580 znaków

2015-02-12 13:09
ne0
0

Okay,

skasowałem wszystko bo działa. Poprawne rozwiązanie:

 var colors1 = {
                'Green': '#4b8e19',
                'Red': '#dd1d1d',
                'Amber': '#FFBA00'
            };
            var  browserData = [];
            for (i = 0; i < dataForChart.length; i++) {
                    browserData.push({
                        name: dataForChart[i][0],
                        y: dataForChart[i][1],
                        color: colors1[dataForChart[i][0]]
                    });
            }

            var options = {
                chart: {
                    type: 'pie',
                    renderTo: 'personPkis'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><br/>Count: {point.y}'
                },
                title: {
                    text: 'Visits per project for: ' + personShortcut
                },

                series: [{
                    type: 'pie',
                    name: 'Project share',
                    data: browserData,
                }]
            };
            var chart = new Highcharts.Chart(options);

Pomogłem? To dobrze :)
edytowany 3x, ostatnio: ne0, 2015-02-12 13:33

Pozostało 580 znaków

Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0