英文:
How to change Font and text color, border color in Gantt chart Highcharts?
问题
I want to change font family, font size, font color so that my entire chart should have same font and color.
我想要更改字体系列、字体大小、字体颜色,以便我的整个图表都具有相同的字体和颜色。
I know using style api i can do that but it only changes in some places
我知道可以使用API来实现,但它只会在某些地方进行更改。
Here i want blue border everywhere but I see option to set border color for xAxis, YAxis, and chart](https://i.stack.imgur.com/llOp9.png)
在这里,我希望在所有地方都有蓝色边框,但我只看到可以设置x轴、y轴和图表的边框颜色的选项。
But this does not look good.
但这看起来不好。
Is there way i can set border color, font size, font family, font color all these css styles so that entire chart looks uniform to me.
有没有办法可以设置边框颜色、字体大小、字体系列、字体颜色等所有这些CSS样式,以便整个图表看起来对我来说都是统一的。
Tried api https://api.highcharts.com/highstock/chart.style and few other to change styling
尝试了API以及其他一些方法来更改样式。
英文:
I want to change font family, font size, font color so that my entire chart should have same font and color.
I know using style api i can do that but it only changes in some places
Here i want blue border everywhere but I see option to set border color for xAxis, YAxis, and chart](https://i.stack.imgur.com/llOp9.png)
But this does not look good.
Is there way i can set border color, font size, font family, font color all these css styles so that entire chart looks uniform to me.
[Code Pen](https://codepen.io/manshi44/pen/OJaXOOr)
Tried api https://api.highcharts.com/highstock/chart.style and few other to change styling
答案1
得分: 1
更改字体只需设置chart.style.fontFamily
属性:
chart: {
style: {
fontFamily: 'Fasthand'
}
}
至于文本颜色,您可以为每个元素设置样式,可以为title
、轴labels
、credits
以及所有其他元素进行此操作:
title: {
style: {
color: 'red'
}
}
边框颜色需要记住所有轴的grid
、tick
和lines
,默认情况下甘特图中有2个x轴,一个用于月份,一个用于年份:
xAxis: [{
gridLineColor: 'blue',
tickColor: 'blue',
lineColor: 'blue'
}, {
labels: {
style: {
color: 'red'
}
},
tickColor: 'blue',
lineColor: 'blue'
}]
演示: https://jsfiddle.net/BlackLabel/5Lj6xbo8/ <br/>
API: https://api.highcharts.com/highstock/chart.style <br/>
https://api.highcharts.com/highcharts/xAxis.labels.style.color <br/>
https://api.highcharts.com/highcharts/title.style.color <br/>
https://api.highcharts.com/highcharts/credits.style.color <br/>
英文:
To change the font, just set chart.style.fontFamily
property:
<!-- language: lang-js -->
chart: {
style: {
fontFamily: 'Fasthand'
}
}
As for text color, you can set styles for each element, you can do this for title
, axis labels
, credits
and all the rest:
<!-- language: lang-js -->
title: {
style: {
color: 'red'
}
}
Border color you need to remember about the grid
, tick
and lines
of all axes, there are 2 x-axes in the gant by default, separate for months and separate for years:
<!-- language: lang-js -->
xAxis: [{
gridLineColor: 'blue',
tickColor: 'blue',
lineColor: 'blue'
}, {
labels: {
style: {
color: 'red'
}
},
tickColor: 'blue',
lineColor: 'blue'
}]
Demo: https://jsfiddle.net/BlackLabel/5Lj6xbo8/ <br/>
API: https://api.highcharts.com/highstock/chart.style <br/>
https://api.highcharts.com/highcharts/xAxis.labels.style.color <br/>
https://api.highcharts.com/highcharts/title.style.color <br/>
https://api.highcharts.com/highcharts/credits.style.color <br/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论