在HighCharts中自定义单个系列的颜色

Question

我正在使用HighCharts制作折线图，并尝试为每个系列更改线条颜色。我找到了这个例子here，但数据是硬编码的。我的数据是从Sql数据库中提取的，并使用一些VB代码传递到HTML页面。

        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 %>],
            });

我尝试使用其他帖子中的方法进行样式设置，但是它没有生成图表。主要问题在于，这条线图有两个系列，所以下面的方法会设置两个系列的颜色，我需要在VB代码中如何设置系列格式呢？

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

编辑：

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

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

- Blob

Answer 1

顶级配置可以包含颜色字段。这是一个数组，用于选择系列的颜色。

点击这里.

这是我项目中的可工作部分。

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

外观：

- Sergio Tulentsev

---

我尝试输入High Charts上解释的部分，但它没有返回图表 :-( : Highcharts.setOptions({ colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] }); - Blob

为什么你调用 setOptions 而不是 new Highcharts.Chart？ - Sergio Tulentsev

因为当我在新的Highcharts.Chart中尝试时，它似乎不起作用，并查看了HighCharts上的示例。请参见上面的编辑。谢谢。 - Blob

我现在明白了..谢谢！（我需要重建我的解决方案）真尴尬！ - Blob

Answer 2

颜色可以作为系列的一部分进行配置。尝试像这样：

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]
    }
];

- Vivek Singh

Answer 3

请见下方代码（以及它所呈现的图表）。

下面的代码片段是一个完整的脚本，即将其放置在标记之间两个脚本标签之间或作为一个独立的 js 文件与包含在您的标记中。

“Colors”是一个 Chart 对象，因此最简单的方法是传递一个颜色数组（作为十六进制字符串）。

 $(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]
           }
           ]
        });
    });
})

- doug