javascript - Hogyan változtathatom meg a magas táblázatokkal ellátott piechart színét?

Translate

A nagydiagramokat használom piechart készítéséhez, de gondjaim vannak egy egyedi színkészlet betöltésével a diagramomhoz.

Itt van a kódom:

     <script type="text/javascript">
     $(function () {
     Highcharts.setOptions({
     colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
    });
    return new Highcharts.Chart({


        chart: {
            renderTo: 'trailpiechart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: "#f8f8f8",
            margin: [20, 20, 20, 20]
        },


        credits: {
            enabled: false
        },

        title: {
            text: caption
        },
        tooltip: {
            formatter: function () {
                return this.y + ' links';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: {
            layout: 'vertical',
            floating: false,
            borderRadius: 0,
            borderWidth: 0
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: data
        }]
    });
    });
</script>

A kördiagramom ezzel a kóddal működik, de csak az alapértelmezett színes raklapot használja.

Hogyan adhat meg egyedi színkészletet?

This question and all comments follow the "Attribution Required."

Minden válasz

Translate
Highcharts.setOptions({
 colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

Nézze meg a következő példáthttp://jsfiddle.net/8QufV/

Forrás
Translate

Azok számára, akik inicializálni szeretnék a színt a konfigurációkban, egyszerűen beírhatja a színeket a config objektum plotOptions részébe, így:

...,
plotOptions: {
  pie: {
   colors: [
     '#50B432', 
     '#ED561B', 
     '#DDDF00', 
     '#24CBE5', 
     '#64E572', 
     '#FF9655', 
     '#FFF263', 
     '#6AF9C4'
   ],
   allowPointSelect: true,
   cursor: 'pointer',
   dataLabels: {
     enabled: false
   },
   showInLegend: true
 }
},
...
Forrás
Translate

Azt hiszem, amit meg kell tennie, állítsa be a színeket a setOptions helyett a téma segítségével:

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
                             '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});
Forrás
Translate

A @Loko Web Design kérdésének megválaszolásáhozhttps://stackoverflow.com/a/38794379/7475250

Van olyan weboldal, amely megmondja, hogy mi felel meg az egyes "színeknek"? Az összes válasz itt valami hasonlót mutat:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

De mit változtatnak valójában a 333., a CB2326 stb.? Nyilván csak meg tudom változtatni őket, és megnézem, mi változik, de jó lenne, ha ez a referencia elérhető lenne valahol.

A színes dokumentumok elérhetőekitt. Bár hasznosak, nem írják le, hogy az adott szín megváltoztatása valójában mit jelent. Az alábbiakban a legjobb leírásom található.

A színek támogatása megadja a Highcharts számára azokat a színeket, amelyeken át szeretné görgetni a diagramot. Például, ha a következő színű kelléke van.

colors: ['blue', 'green']

A pite szeleteit váltogatná a kék és a zöld. Ha a kéket pirosra változtatja, akkor a vörös és a zöld váltakozik. Tesztelje az alábbiakkalhegedű

A színlista kibővítése növeli a színek számát az ismétlés előtt.

colors: ['blue', 'green', 'yellow']

Megismételné a színeket, ha 4-nél több szelet van az adatkészletben.

Forrás
Translate
Highcharts.setOptions({
 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',      '#6AF9C4']
});
Forrás
Translate

Van olyan weboldal, amely megmondja, hogy mi felel meg az egyes "színeknek"? Az összes válasz itt valami hasonlót mutat:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

De mit változtatnak valójában a 333., a CB2326 stb.? Nyilván csak meg tudom változtatni őket, és megnézem, mi változik, de jó lenne, ha ez a referencia elérhető lenne valahol.

Forrás
Translate

Nekem is ugyanaz volt a problémám. A highcharts.css fájlban található egy "Alapértelmezett színek" szakasz. Miután töröltem ezt a részt, használhatok egyedi színeket. Egyébként úgy gondolom, hogy nincs szüksége highcharts.css-re, ha a v5.0.4 vagy újabb verziót használja.

Forrás
Translate

Highcharts.Color (Highcharts.getOptions (). Színek [0]). SetOpacity (0.5) .get ('rgba')]

Magas listákon beépített színek vannak. Tehát meg kell változtatnia a [0] vagy [1] szín útját ........ [6]

Forrás
Leave a Reply
You must be logged in to post a answer.
A szerzőről