javascript - Kuinka voin muuttaa korkean kaavion piechart-värini?

Translate

Käytän highchartsia piechartin tekemiseen, mutta minulla on vaikeuksia ladata mukautettuja värisarjoja kaaviossani.

Tässä on koodini:

     <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>

Oma ympyräkaavio toimii tämän koodin kanssa, mutta siinä käytetään vain oletusväripalettia.

Kuinka määrität mukautetun värisarjan?

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

Kaikki vastaukset

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

Katso seuraava esimerkkihttp://jsfiddle.net/8QufV/

Lähde
Translate

Niille teistä, jotka haluavat alustaa värin määrityksissä, voit yksinkertaisesti laittaa värit config-objektin plotOptions-osaan seuraavasti:

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

Mielestäni sinun on asetettava värit käyttämällä teemaa setOptionsin sijaan seuraavasti:

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

Vastaa @Loko Web Design -kysymykseenhttps://stackoverflow.com/a/38794379/7475250

Onko verkkosivua, joka kertoo, mitä kukin "väreistä" vastaa? Kaikki vastaukset tässä osoittavat jotain:

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

Mutta mitä # 333, # CB2326 jne. Todella muuttuvat? Ilmeisesti voin vain muuttaa niitä ja nähdä, mitä muuttuu, mutta olisi hienoa saada tämä viite saataville jonnekin.

Väridokumentit ovat saatavillatässä. Vaikka ne ovat hyödyllisiä, he eivät kuvaa, mitä tietyn värin muuttaminen todella tekee. Alla on paras kuvaus.

Värituki antaa Highchartsille värit, joiden haluat kaavion läpi. Esimerkiksi jos sinulla on seuraava värituki.

colors: ['blue', 'green']

Piiraviipaleesi vaihtelevat sinisen ja vihreän välillä. Sinisen vaihtaminen punaiseksi väreissä vaihtaisi sitten punaista ja vihreää. Testaa se seuraavilla tavoillaviulu

Väriluettelon laajentaminen lisää värien määrää ennen toistamista.

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

Toistaisi värit, jos tietojoukossa on enemmän kuin 4 viipaletta.

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

Onko verkkosivua, joka kertoo, mitä kukin "väreistä" vastaa? Kaikki vastaukset tässä osoittavat jotain:

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

Mutta mitä # 333, # CB2326 jne. Todella muuttuvat? Ilmeisesti voin vain muuttaa niitä ja nähdä, mitä muuttuu, mutta olisi hienoa saada tämä viite saataville jonnekin.

Lähde
Translate

Minulla oli sama ongelma. Highcharts.css-tiedostossa on osio "Oletusvärit". Kun olen poistanut tämän osan, voisin käyttää mukautettuja värejä. Joka tapauksessa luulen, että et tarvitse highcharts.css-tiedostoa, jos käytät versiota v5.0.4 tai uudempaa.

Lähde
Translate

Highcharts.Color (Highcharts.getOptions (). Värit [0]). SetOpacity (0.5) .get ('rgba')]

Korkeissa kaavioissa on sisäänrakennettuja värejä. Joten sinun on muutettava värin polku [0] tai [1] ........ [6]

Lähde
Leave a Reply
You must be logged in to post a answer.
Kirjailijasta