HighCharts : Est-il possible de personnaliser les couleurs des séries individuelles ?

Question

Je suis en train d'utiliser HighCharts pour un rapport graphique en ligne. Dans ce rapport spécifique, on m'a demandé de personnaliser les couleurs de chaque série. Les séries resteront toujours les mêmes. Par exemple :

Série John : ligne en pointillés bleue Série Mary : ligne rouge pleine

Est-ce que quelqu'un sait comment accomplir cela ?

Answer 1

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

var graphique = 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

Answer 2

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 listés ci-dessous, tout membre des plotOptions pour ce type spécifique de graphique peut être ajouté à une série individuellement. Par exemple, même si une lineWidth générale est spécifiée dans plotOptions.series, une lineWidth individuelle peut être spécifiée pour chaque série.

Vous pouvez donc ajouter n'importe quoi de plotOptions.

Démonstration :

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

Démonstration en direct