jquery - 条形图渐变背景未显示 - Highcharts

Question

我正在使用 Highcharts.js-library 在我的网站上创建条形图，我希望使用渐变作为条形的背景色(填充)。我做到了here在 JSFiddle 中，一切正常。但是，当我在我的网站上使用相同的代码时，它无法正常工作，我也不知道为什么。

我的js代码是这样的:

$(function () {

    Highcharts.chart('container', {

        title: {
            text: ''
        },

        xAxis: {
            categories: ['Driftsinntekter forrige år', 'Resultat før skatt forrige år', 'Egenkapital', 'Driftsresultat', 'Årsresultat']
        },

        defs: {
            gradient0: {
                tagName: 'linearGradient',
                id: 'gradient-0',
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1,
                children: [{
                    tagName: 'stop',
                    offset: 0
                }, {
                    tagName: 'stop',
                    offset: 1
                }]
            }, glow: {
                tagName: 'filter',
                id: 'glow',
                opacity: 0.5,
                children: [{
                    tagName: 'feGaussianBlur',
                    result: 'coloredBlur',
                    stdDeviation: 1.5
                }, {
                    tagName: 'feMerge',
                    children: [{
                        tagName: 'feMergeNode',
                        in: 'coloredBlur'
                    }, {
                        tagName: 'feMergeNode',
                        in: 'SourceGraphic'
                    }]
                }]
            }
        },

        series: [{
            type: 'bar',
            keys: ['y', 'selected'],
            data: [
                [29.9, false],
                [71.5, false],
                [106.4, false],
                [129.2, false],
                [144.0, false]
            ]
        }]
    });
});

我的 CSS 是这样的(在单独的文件中):

@import 'https://code.highcharts.com/css/highcharts.css';

#container {
    height: 400px;
    max-width: 800px;
    min-width: 320px;
    margin: 0 auto;
}

/* Define the stop colors */
#gradient-0 stop {
    stop-color: #DBFDFC;
}
#gradient-0 stop[offset="0"] {
    stop-opacity: 1;
}
#gradient-0 stop[offset="1"] {
    stop-color: #2E3D50;
}

/* Apply the gradients */
.highcharts-point-select, .highcharts-color-0 {
  filter: url('#glow');
  stroke: transparent;
    fill-opacity: 1;
    fill: url('#gradient-0');
}

Here是实时页面 - 如果您向下滚动到“Regnskap”部分，您将看到图表网格但没有条形图。如果您使用网络开发工具，您可以看到“Driftsinntekter forrige år”处有一个栏，但它没有显示。

我在 head 标签中包括库和 css 文件，如下所示:

<script src="http://code.highcharts.com/highcharts.js"></script>
<link rel="stylesheet" href="/resources/css/charts.css">

希望有人能帮忙。提前致谢!

Answer 1

现在可以正常工作了。我的问题是我在 head-tag 中包含了错误的 Highcharts-mode。

我必须包括这个(样式模式):

<script src="https://code.highcharts.com/js/highcharts.js"></script>