2017-05-13 1 views
1

나는 reasearch의 공정한 비트를했지만 붙어 있습니다. # 75f094의 텍스트 색상을 사용하려면 높은 차트의 서식을 지정하려고합니다.Highcharts CSS 스타일링 축 글꼴

@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; 
} 

와 자바 스크립트 코드를 해당 : 나는 다음과 같은 CSS 코드가

$(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 페이지에 올바르게 첨부됩니다. 내가 잘못 가고있는 아이디어는 제발? 브라우저는 Firefox가 아닌 Chrome입니다. 고마워.

답변

1

하이 차트가 SCSS를 사용하여 축 색상을 요소의 스타일로 적용하는 것처럼 보입니다.

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

또는 당신은 당신의 CSS 스타일에 !important를 추가 할 수 있습니다 그래서 당신은 SCSS에 중간색을 업데이트 할 수 있습니다. highcharts-axis-title의 경우 colorfill을 모두 사용하므로 다음과 같습니다.

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