Highcharts 为什么海图区域的颜色是黑色？

我使用带有

areaspline

类型的Highchart，我的问题是根据

plotOptionsp

属性中的

fillOpacity

，区域会变黑或变灰。我在不同的语法类型中使用它，但结果是相同的

例如：

plotOptions: {
     area: {
         fillOpacity: 0.5,
    },
}

或：

您可以看到结果的屏幕截图：

这是我的代码：

chart: {
    type: 'areaspline'
},
title: {
    text: 'Average fruit consumption during one week'
},
legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 150,
    y: 100,
    floating: true,
    borderWidth: 1,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
    categories: [
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
        'Sunday'
    ],
    plotBands: [{ // visualize the weekend
        from: 4.5,
        to: 6.5,
        color: 'rgba(68, 170, 213, .2)'
    }]
},
yAxis: {
    title: {
        text: 'Fruit units'
    }
},
tooltip: {
    shared: true,
    valueSuffix: ' units'
},
credits: {
    enabled: false
},
plotOptions: {
    areaspline: {
        fillOpacity: 0.5
    }
},
series: [{
    name: 'John',
    data: [3, 4, 3, 5, 4, 10, 12]
}, {
    name: 'Jane',
    data: [1, 3, 4, 3, 3, 5, 4]
}]

---

我应该怎么做才能解决这个问题？

您可以发布您的问题的实例，比如JSFIDLE吗？当我测试了您的代码后，一切都正常工作：不幸的是，当我创建live example时，一切都正常。您可以尝试手动设置fillColor:是否可以在css中自定义它？是否可以使用highcharts area类：

chart: {
    type: 'areaspline'
},
title: {
    text: 'Average fruit consumption during one week'
},
legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 150,
    y: 100,
    floating: true,
    borderWidth: 1,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
    categories: [
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
        'Sunday'
    ],
    plotBands: [{ // visualize the weekend
        from: 4.5,
        to: 6.5,
        color: 'rgba(68, 170, 213, .2)'
    }]
},
yAxis: {
    title: {
        text: 'Fruit units'
    }
},
tooltip: {
    shared: true,
    valueSuffix: ' units'
},
credits: {
    enabled: false
},
plotOptions: {
    areaspline: {
        fillOpacity: 0.5
    }
},
series: [{
    name: 'John',
    data: [3, 4, 3, 5, 4, 10, 12]
}, {
    name: 'Jane',
    data: [1, 3, 4, 3, 3, 5, 4]
}]