Highcharts CSS Styling Axisフォント

Question

私はreasearchのかなりのビットを行ったが、スタックしています。 ＃75f094のテキストカラーを持つようにハイチャートをフォーマットしようとしています。

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

... Other CSS styling... 

/* Highcharts Styling */ 
.highcharts-title { 
    fill: #434348; 
    color: #75f094; 
    font-weight: bold; 
    letter-spacing: 0.3em; 
    font-size: 1em; 
} 
.highcharts-subtitle { 
    font-family: 'Courier New', monospace; 
    color: #75f094; 
    font-style: italic; 
    fill: #7cb5ec; 
} 

.highcharts-axis.highcharts-color-0 text { 
    fill: #75f094; 
} 

とJavaScriptコード対応：

$(function() { 

    var x_values = []; 
    var y_values = []; 
    var switch1 = true; 
    $.get('php/values.php', function(data) { 

     data = data.split('/'); 
     for (var i in data) 
     { 
      if (switch1 == true) 
      { 
       //var ts = timeConverter(data[i]); 
       ts = (data[i]); 
       //console.log(ts); 
       x_values.push(ts); 
       switch1 = false; 
      } 
      else 
      { 
       y_values.push(parseFloat(data[i])); 
       console.log(data[i]); 
       switch1 = true; 
      } 

     } 
     x_values.pop(); 

     $('#contentRight').highcharts({ 
      chart : { 
       type : 'spline' 
      }, 
      title : { 
       text : 'Last 24hrs Usage' 
      }, 
      subtitle : { 
       text : 'Source: ESP8266db' 
      }, 
      xAxis : { 
       title : { 
        text : 'Time' 
       }, 
       categories : x_values 
      }, 
      yAxis : [{ 
       max: 100, 
       className: 'highcharts-color-0', 
       title : { 
        text : '% Light' 
       }, 
       labels : { 
        formatter : function() { 
         return this.value + ' %' 
        } 
       } 
      }], 
      tooltip : { 
       crosshairs : true, 
       shared : true, 
       valueSuffix : '' 
      }, 
      plotOptions : { 
       spline : { 
        marker : { 
         radius : 4, 
         lineColor : '#666666', 
         lineWidth : 1 
        } 
       } 
      }, 
      legend: { 
       enabled: false 
      }, 
      series : [{ 

       name : 'Temperature', 
       data : y_values 
      }] 
     }); 
    }); 
}); 

そして、それは、チャートのスタイルを設定しません、それだけで色をデフォルトとしての私は、次のCSSコードを持っています。 CSSは、ページの残りの部分をスタイリングしているので、HTMLページに正しく添付されています。私が間違って行っているすべてのアイデアをお願いします。ブラウザはFirefoxではなくChromeです。どうも。

Answer 1

ハイチャートがSCSSを使用して軸上の色を要素のスタイルとして適用するようです。

$neutral-color-60: #666666 !default; // Axis labels, axis title, connector fallback.

か、あなたのCSSスタイルに!importantを追加することができます。だから、どちらかSCSSで中間色を更新することができます。 highcharts-axis-titleにはcolorとfillの両方が使用されていますので、

.highcharts-axis-title { 
    color: #75f094 !important; 
    fill: #75f094 !important; 
}