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?

Lähde

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

Kaikki vastaukset

Ricardo Alvaro Lohmann

Translate

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

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

Lähde

Ali Yazdani

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

Linger

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

BJax

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

min2bro

Translate

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

Lähde

Loko Web Design

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

bugovicsb

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

Kondal

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

You must be logged in to post a answer.

Kirjailijasta

Sreenath Plakkat

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

Kaikki vastaukset

Leave a Reply

Kirjailijasta

Samanlaisia ongelmia

Category