如何更改Highcharts中的文本颜色

How to change the text color in Highcharts

本文关键字：文本 颜色 何更改 Highcharts      更新时间：2023-09-26

这应该非常简单，但是我仔细阅读了highcharts文档，似乎找不到一个专门针对文本颜色的选项(相反，背景、边框、线条等都有特定的颜色选项)。然后我看到了这张图表。风格的选择。它似乎应该工作——但是没有。

在这个jsfiddle演示中，您将看到我能够更改字体族，但不能更改颜色。

我错过了什么?

检查这个例子，我能够改变你的jsfiddle上的标签颜色。下面是整个options参数:

Highcharts.setOptions({
    chart: {
        style: {
            fontFamily: 'monospace',
            color: "#f00"
        }
    },
    title: {
      style: {
         color: '#F00',
         font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
      }
   },
    xAxis: {
      gridLineWidth: 1,
      lineColor: '#000',
      tickColor: '#000',
      labels: {
         style: {
            color: '#F00',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'
         }            
      }
   },
   yAxis: {
      minorTickInterval: 'auto',
      lineColor: '#000',
      lineWidth: 1,
      tickWidth: 1,
      tickColor: '#000',
      labels: {
         style: {
            color: '#F00',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'
         }            
      }
   },
});

几乎每个选项都可以应用样式，就像我在这个例子中对y轴所做的那样:

http://jsfiddle.net/h3azu/

我也建议你去这个页面，

http://www.highcharts.com/demo/combo-dual-axes

，然后点击"查看选项"来了解"style"选项用于文本上色的其他方法。

查看highcharts.src.js，您可以设置单个元素的样式，例如，我在您的示例中将chart更改为title，并且颜色被拾取;

  title: {
    style: {
        fontFamily: 'monospace',
        color: "#f00"
    }
}

Docs

title:{
  text: 'Something',
  style: {"color": "#003C71", "fontSize": "18px"}
}
相关文章：