2017-05-13 58 views
1

我做了一些研究,但被卡住了。我正在嘗試格式化高圖表,使文字顏色爲#75f094。我有以下的CSS代碼:Highcharts CSS Styling Axis字體

@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正確地連接到HTML頁面,因爲它正在設計頁面的其餘部分。任何想法,我錯了嗎?瀏覽器是Chrome,而不是Firefox。謝謝。

回答

1

它看起來像高圖使用SCSS將軸顏色作爲樣式應用於元素。所以,你可以更新的中性色在SCSS:

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

,或者你可以添加!important到你的CSS樣式。它同時使用colorfill作爲highcharts-axis-title,所以它會是:

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