Question

我正在使用Highcharts.js-library在我的网站上创建一个条形图，我希望有一个渐变作为条形的背景颜色（填充）。我在JSFiddle中完成了here，一切正常。但是当我在我的网站上使用相同的代码时，它不起作用，我无法弄清楚原因。

我的js-code是这样的：

$(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”部分，您将看到图表网格但没有条形图。如果您使用web-dev-tool，您可以看到“Driftsinntekterforrigeår”中有一个栏，但它没有显示。

我将库和css文件包含在head - 标记中，如下所示：

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

希望有人可以提供帮助。提前谢谢！

Answer 1

现在它的工作。我的问题是我在head - 标记中包含了错误的Highcharts模式。

我必须包含这个（样式模式）：

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

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

1 个答案: