Highcharts 面积图 - 指定区域颜色答案

【问题标题】：Highcharts Area Chart - Specifying Area ColorHighcharts 面积图 - 指定区域颜色
【发布时间】：2015-07-29 15:11:22
【问题描述】：

我是编码新手，我觉得这个答案应该不难；但是，我已经为此苦苦挣扎了大约两天，所以我正在寻求帮助。

我正在尝试在 Highcharts 的“负值区域图”中指定区域的颜色。我正在使用 Highcharts 的基本模板，但不知道如何更改各个区域的颜色。

这是包含我试图指定颜色的 JSfiddle；当我这样做时，图表无法运行。（请注意，我已尝试更改“john”系列的颜色）。

http://jsfiddle.net/aoouym2o/

我按照 HighCharts 的 API 中给出的说明进行操作，但无法使其正常工作。这是 API 部分：http://api.highcharts.com/highcharts#plotOptions.area.color

再次，这是原始代码没有我试图改变任何颜色：

$(function () {
$('#container').highcharts({
    chart: {
        type: 'area'
    },
    title: {
        text: 'Area chart with negative values'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, -2, -3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, -2, 5]
    }]
});

});

我错过了什么？

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

你做得完全正确，你只是在添加颜色设置之前少了一个逗号；）

series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2],
        color: '#FF0000'
    },

Here is a link 到一个修改过的小提琴。（工作版本的更新链接）

【讨论】：

啊谢谢！！事后看来，这是非常明显的。但我自己的想法太深了，我应该退后一步，看看基础知识。

【解决方案2】：

您可以通过在每个系列对象中指定图表来设置图表颜色：

    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2],
        color: '#0000FF'
    }, {
        name: 'Jane',
        data: [2, -2, -3, 2, 1],
        color: '#FF0000'
    }, {
        name: 'Joe',
        data: [3, 4, 4, -2, 5],
        color: '#00FF00'
    }]

【讨论】：

【解决方案3】：

只需更改颜色设置：P

        series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2],
        color : '#f7a35c'
    }, {
        name: 'Jane',
        data: [2, -2, -3, 2, 1],
        color: '#7cb5ec'
    }, {
        name: 'Joe',
        data: [3, 4, 4, -2, 5],
        color: '#90ed7d'
}]

如果你想改变数字的颜色 > 0 手表 http://www.highcharts.com/docs/chart-concepts/series

【讨论】：

【解决方案4】：

添加选项：

plotOptions: {
    series: {
        lineColor: '#303030'
    }
},

【讨论】：