棒グラフのグラデーションの背景が表示されない - ハイチャート

Question

私はHighcharts.js-libraryを使用して私のウェブサイトで棒グラフを作成しています。グラデーションを背景色（塗りつぶし）にしたいと思います。私はJSFiddleでhereを実行して、すべて正常に動作しています。しかし、私が自分のウェブサイトで同じコードを使用すると、うまく機能せず、なぜその理由が分かりません。

私の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」セクションに移動すると、グラフグリッドが表示されますがバーは表示されません。 web-dev-toolを使用すると、 "Driftsinntekter forrigeår"にバーがあることがわかりますが、表示されていません。

私は次のようにライブラリとhead -tagでCSSファイルを含めています：

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

は、誰かが助けることができると思います。前もって感謝します！

Answer 1

現在は動作しています。私の問題は、headタグに間違ったハイチャートモードを含めることでした。

私はこの1つ（スタイルモード）を含める必要がありました：

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