Verwendung der CSS-Klasse in HighCharts

Question

Anstatt CSS-Stile mit Highchart-Optionen wie (fontWeight, fontColor usw.) anzugeben, können CSS-Klassen zum Formatieren der verschiedenen Elemente eines Diagramms verwendet werden?

Answer 1

Ja, Sie müssen !Important verwenden, weil es die einzige Möglichkeit ist, Inline style zu überschreiben.
Ihr Diagramm wird auf einige Inhalte übertragen, die Sie ID auf chart.rendertTo Option übergeben müssen.
So können Sie die Elemente von Ihrem Diagramm Container, wie.

#container text { 
    font-size: 14px !Important; 
} 

Demo

Answer 2

In vielen Fällen (Tooltip, Etiketten) Sie useHTML als wahr, und dann CSS-Stile verwenden, ohne! Important oder verwenden Sie Formatierer festlegen können Sie Ihre eigenen Elemente mit CSS-Stile zu definieren.

Beispiel http://api.highcharts.com/highcharts#tooltip.useHTML

Answer 3

Ihr highcharts Chart ist ein SVG in Ihrem HTML. Sie müssen den SVG-Quellcode überprüfen, um die Namen der Klassen zu kennen, und Sie können sie dann in Ihrem CSS verwenden. Sie müssen hinzufügen, wichtig, da einige Standardstile bereits in der SVG vorhanden sind.

Zum Beispiel können Sie

text { 
    fill:red !important; 
    font-family: "Arial" !important; 
    font-size : 12px !important; 
} 

verwenden, um Standardschriftfarbe, Familie und Stil

oder

.highcharts-yaxis-labels text 
{ 
    (some css) 
} 

zu definieren, die y-Achse Etiketten Stil

Answer 4

zu definieren Sie können den css-Klassennamen in der Option 'chart' für Highcharts verwenden, aber diese Änderungen werden übernommen Ich denke nicht über das exportierte Diagramm nach. Zum Beispiel:

chart{ 
    type: 'line', 
    className: 'someCss' 
} 

css:

.someCss{ 
    border-top-left-radius: 25px; 
    font-weight: bold; 
    font-style: italic; 
}