为什么 Highcharts 主题不起作用？

Question

我正在尝试使主题在我的图表上起作用，但我失败了。我有这个 jsfiddle 来说明这个问题。看起来确实应用了某些样式（例如，按钮颜色确实发生了变化），但其他一些则没有（例如背景颜色）。

Highcharts.darkgreen = {
    colors: ['#DDDF0D', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee',
        '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'
    ],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 250, 500],
            stops: [
                [0, 'rgb(48, 96, 48)'],
                [1, 'rgb(0, 0, 0)']
            ]
        },
        borderColor: '#000000',
        borderWidth: 2,
        className: 'dark-container',
        plotBackgroundColor: 'rgba(255, 255, 255, .1)',
        plotBorderColor: '#CCCCCC',
        plotBorderWidth: 1
    },
    title: {
        style: {
            color: '#C0C0C0',
            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    subtitle: {
        style: {
            color: '#666666',
            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    xAxis: {
        gridLineColor: '#333333',
        gridLineWidth: 1,
        labels: {
            style: {
                color: '#A0A0A0'
            }
        },
        lineColor: '#A0A0A0',
        tickColor: '#A0A0A0',
        title: {
            style: {
                color: '#CCC',
                fontWeight: 'bold',
                fontSize: '12px',
                fontFamily: 'Trebuchet MS, Verdana, sans-serif'

            }
        }
    },
    yAxis: {
        gridLineColor: '#333333',
        labels: {
            style: {
                color: '#A0A0A0'
            }
        },
        lineColor: '#A0A0A0',
        minorTickInterval: null,
        tickColor: '#A0A0A0',
        tickWidth: 1,
        title: {
            style: {
                color: '#CCC',
                fontWeight: 'bold',
                fontSize: '12px',
                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
            }
        }
    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
        style: {
            color: '#F0F0F0'
        }
    },
    toolbar: {
        itemStyle: {
            color: 'silver'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                color: '#CCC'
            },
            marker: {
                lineColor: '#333'
            }
        },
        spline: {
            marker: {
                lineColor: '#333'
            }
        },
        scatter: {
            marker: {
                lineColor: '#333'
            }
        },
        candlestick: {
            lineColor: 'white'
        }
    },
    legend: {
        itemStyle: {
            font: '9pt Trebuchet MS, Verdana, sans-serif',
            color: '#A0A0A0'
        },
        itemHoverStyle: {
            color: '#FFF'
        },
        itemHiddenStyle: {
            color: '#444'
        }
    },
    credits: {
        style: {
            color: '#666'
        }
    },
    labels: {
        style: {
            color: '#CCC'
        }
    },


    navigation: {
        buttonOptions: {
            symbolStroke: '#DDDDDD',
            hoverSymbolStroke: '#FFFFFF',
            theme: {
                fill: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0.4, '#606060'],
                        [0.6, '#333333']
                    ]
                },
                stroke: '#000000'
            }
        }
    },

    // scroll charts
    rangeSelector: {
        buttonTheme: {
            fill: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0.4, '#888'],
                    [0.6, '#555']
                ]
            },
            stroke: '#000000',
            style: {
                color: '#CCC',
                fontWeight: 'bold'
            },
            states: {
                hover: {
                    fill: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0.4, '#BBB'],
                            [0.6, '#888']
                        ]
                    },
                    stroke: '#000000',
                    style: {
                        color: 'white'
                    }
                },
                select: {
                    fill: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0.1, '#000'],
                            [0.3, '#333']
                        ]
                    },
                    stroke: '#000000',
                    style: {
                        color: 'yellow'
                    }
                }
            }
        },
        inputStyle: {
            backgroundColor: '#333',
            color: 'silver'
        },
        labelStyle: {
            color: 'silver'
        }
    },

    navigator: {
        handles: {
            backgroundColor: '#666',
            borderColor: '#AAA'
        },
        outlineColor: '#CCC',
        maskFill: 'rgba(16, 16, 16, 0.5)',
        series: {
            color: '#7798BF',
            lineColor: '#A6C7ED'
        }
    },

    scrollbar: {
        barBackgroundColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0.4, '#888'],
                [0.6, '#555']
            ]
        },
        barBorderColor: '#CCC',
        buttonArrowColor: '#CCC',
        buttonBackgroundColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0.4, '#888'],
                [0.6, '#555']
            ]
        },
        buttonBorderColor: '#CCC',
        rifleColor: '#FFF',
        trackBackgroundColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, '#000'],
                [1, '#333']
            ]
        },
        trackBorderColor: '#666'
    },

    // special colors for some of the
    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
    background2: 'rgb(35, 35, 70)',
    dataLabelsColor: '#444',
    textColor: '#C0C0C0',
    maskColor: 'rgba(255,255,255,0.3)'
}

;;

Highcharts.setOptions(Highcharts.darkgreen);;
new Highcharts.stockChart({
    "exporting": {
        "enabled": true
    },
    "chart": {
        "renderTo": "researchChartComponentChartContainer381896448",
        "backgroundColor": "#fff",
        "zoomType": "xy"
    },
    "title": {
        "text": ""
    },
    "rangeSelector": {
        "inputEnabled": true,
        "buttons":

            [{
            type: 'day',
            count: 1,
            text: '1d'
        }, {
            type: 'day',
            count: 5,
            text: '5d'
        }, {
            type: 'month',
            count: 1,
            text: '1m'
        }, {
            type: 'month',
            count: 3,
            text: '3m'
        }, {
            type: 'month',
            count: 6,
            text: '6m'
        }, {
            type: 'ytd',
            text: 'YTD'
        }, {
            type: 'year',
            count: 1,
            text: '1y'
        }, {
            type: 'year',
            count: 2,
            text: '2y'
        }, {
            type: 'year',
            count: 3,
            text: '3y'
        }, {
            type: 'year',
            count: 4,
            text: '4y'
        }, {
            type: 'year',
            count: 5,
            text: '5y'
        }, {
            type: 'year',
            count: 8,
            text: '8y'
        }, {
            type: 'all',
            text: 'All'
        }]



        ,
        "selected": 12
    },
    "scrollbar": {
        "liveRedraw": false
    },
    "tooltip": {
        "valueDecimals": 2,
        "shared": false
    },
    "series": [{
        "marker": {
            "enabled": true
        },
        "yAxis": 0,
        "name": "Common Net Income",
        "index": 0,
        "type": "line"
    }],
    "credits": {
        "text": "Debris Publishing Inc. ",
        "href": "www.debrispublishing.com"
    },
    "xAxis": {
        "title": {
            "text": "Time"
        },
        "type": "datetime"
    },
    "plotOptions": {
        "series": {
            "marker": {
                "enabled": false,
                "states": {
                    "hover": {
                        "enabled": true
                    }
                },
                "radius": 4
            },
            "animation": false
        }
    },
    "yAxis": [{
        "title": {
            "text": "Millions"
        },
        "opposite": false,
        "labels": {
            "format": "{value}"
        },
        "height": "100%"
    }, {
        "title": {
            "text": "Price"
        },
        "opposite": true,
        "labels": {
            "format": "{value}"
        },
        "height": "100%"
    }],
    "navigator": {
        "adaptToUpdatedData": false
    },
    "legend": {
        "enabled": true,
        "floating": false
    }
});
var chart = $('#researchChartComponentChartContainer381896448').highcharts();
chart.showLoading('Loading data from server...');;
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
    var chart = $('#researchChartComponentChartContainer381896448').highcharts();



    chart.series[0].setData(data, false);
    chart.redraw();
    chart.hideLoading();
})

知道哪里出了问题吗？

Answer 1

您在创建图表实例时覆盖了主题。

您的主题有：

Highcharts.darkgreen = {
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 250, 500],
            stops: [
                [0, 'rgb(48, 96, 48)'],
                [1, 'rgb(0, 0, 0)']
            ]
        }
    },
    // ...
};

然后创建图表：

new Highcharts.stockChart({
    "chart": {
        "backgroundColor": "#fff"
    },
    // ...
});

然后 #fff 覆盖您的线性渐变对象。最后定义的值保留。

请参阅 this updated JSFiddle，其中我删除了 #fff 以显示渐变。

为什么 Highcharts 主题不起作用？

Why is Highcharts theme not working?

css

themes

highcharts

highstock