web-dev-qa-db-fra.com

HighCharts: Est-il possible de personnaliser les couleurs de chaque série?

J'utilise HighCharts pour un rapport de graphique linéaire. Dans ce rapport spécifique, on m'a demandé de personnaliser les couleurs de chaque série. La série restera toujours la même. Ainsi, par exemple:

Série John: Ligne pointillée bleue Série Mary: Ligne rouge unie

Est ce que quelqu'un sait comment accomplir cela?

javascriptgraphhighcharts
52
Tjaart

Les options peuvent être définies séparément pour chaque série.

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime'
    },

    series: [{
        name: 'John',
        color: '#0066FF',
        dashStyle: 'ShortDash',
        data: [
            [Date.UTC(2010, 0, 1), 29.9],
            [Date.UTC(2010, 2, 1), 71.5],
            [Date.UTC(2010, 3, 1), 106.4]
        ]
    },{
        name: 'Mary',
        color: '#FF0000',
        data: [
            [Date.UTC(2010, 0, 1), 60.9],
            [Date.UTC(2010, 1, 1), 40.5],
            [Date.UTC(2010, 2, 1), 90.0],
            [Date.UTC(2010, 3, 1), 80.4]
        ]
    }]
});

Exemple JsFiddle

104
Eric C

Si vous lisez l'api ici , vous verrez le texte suivant.

Série

La série réelle à ajouter au graphique. En plus des membres répertoriés ci-dessous, tout membre de plotOptions pour ce type de tracé spécifique peut être ajouté à une série individuellement. Par exemple, même si un lineWidth général est spécifié dans plotOptions.series, un lineWidth individuel peut être spécifié pour chaque série.

Vous pouvez donc ajouter n'importe quoi à partir de plotOptions.

Démo:

series: [{
    name: 'serie1',
    data: [0,1,2,3,4,5,6,7,8,9],
    color: '#FFFF00',
    lineWidth: 4,
    id: 'serie1',
    step: true
}]

Démo de travail

8
Ricardo Alvaro Lohmann