Customizing the colors of individual series in Hig

问题:

I am using HighCharts for a line graph and i am attemping to change the line color for each series. I did find this example here but the data is hard coded. My data is pulled from an Sql database and passed to the HTML page using some VB code.

        var chart; 
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'column'
                },
                title: {
                    text: 'Chart Title'
                },
                subtitle: {
                    text: 'Chart subtitle'
                },
                xAxis: {
                    categories: [<%= GraphDate %>]
                    ,
                    labels:
                    {
                        rotation: -45,
                        align: 'right',
                        style:
                        {

                        }
                    }
                },
                yAxis: {
                    min: 160,
                    title: {
                        text: 'Temp'
                    }
                },
                legend: {
                    layout: 'vertical',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 400,
                    y: 0,
                    floating: true,
                    shadow: true
                },
                tooltip: {
                    formatter: function () {
                        return '' +
                            this.x + ': ' + this.y + ' ºC';
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: 

                [<%= GraphSeries %>],
            });

I tried to style it using the other post however it failed to generate a chart. The main problem is though, the line graph has two series, so the below method would set the color for both series i assume? So, would i maybe need to format the series in my vb code somehow?

series: [{ 
    color: 'yellow',
    data: [
        [<%= GraphSeries %>]
    ]},

Edit:

$(document).ready(function () {
            chart = new Highcharts.Chart({
            colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92']

                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'column'
                }

回答1:

Top level config can contain colors field. It's an array from which series colors will be picked.

See here.

Here's working piece from my project

var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart:{
            renderTo:'perfchart',
            type:'line',
            marginRight:130,
            marginBottom:25
        },
        colors: ['#0000FF', '#0066FF', '#00CCFF'],
        title:{
            text:'Historical system performance',
            x:-20 //center
        },

Appearance:

回答2:

See the code (and the plot that it renders) below.

The snippet below is a complete script--i.e., either put it in your markup between two script tags or as a stand-along js file with an includes in your markup.

Colors is a Chart object so the easiest way is to pass an array of colors (as hex strings):

 $(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line'
            },
            colors: ['#562F1E', '#AF7F24', '#263249', '#5F7F90', '#D9CDB6'],
            title: {
               text: false
            },
            yAxis: {
                title: {
                    text: false
                }
           },
           series: [{
                name: 'series I',
                data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
           },
           {
                name: 'series II',
                data: [13.19, 17.23, 25.74, 28.5, 33.9, 35.62, 37.0, 36.6, 34.82]
           }
           ]
        });
    });
})

回答3:

The color can be configured as part of the series. Try something like this:

series: [
    {
        name: 'series I',
        color: '#ffffff',
        data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
    }
];