如何在Highcharts的甘特图中更改字体、文本颜色和边框颜色?

huangapple go评论122阅读模式
英文:

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样式,以便整个图表看起来对我来说都是统一的。

Code Pen

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、轴labelscredits以及所有其他元素进行此操作:

title: {
  style: {
    color: 'red'
  }
}

边框颜色需要记住所有轴的gridticklines,默认情况下甘特图中有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: &#39;Fasthand&#39;
  }
}

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: &#39;red&#39;
  }
}

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: &#39;blue&#39;,
  tickColor: &#39;blue&#39;,
  lineColor: &#39;blue&#39;
}, {
  labels: {
    style: {
      color: &#39;red&#39;
    }
  },
  tickColor: &#39;blue&#39;,
  lineColor: &#39;blue&#39;
}]

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/>

huangapple
  • 本文由 发表于 2023年6月21日 23:30:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/76524937.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定