如何更改Highcharts中的文本颜色

时间:2023-01-14 21:17:19

This should be pretty simple, but I've pored over the highcharts documentation and can't seem to find an option that specifically addresses the text color (in contrast, there are specific color options for backgrounds, borders, lines, etc.). Then I came across the chart.style option. It seems like it should work -- but doesn't.

这应该是非常简单的,但我仔细考虑了高图文档,似乎找不到专门针对文本颜色的选项(相比之下,背景,边框,线条等有特定的颜色选项)。然后我遇到了chart.style选项。它似乎应该工作 - 但不是。

In this jsfiddle demo you'll see that I was able to change the font-family, but not the color.

在这个jsfiddle演示中,您将看到我能够更改字体系列,而不是颜色。

What am I missing?

我错过了什么?

3 个解决方案

#1


34  

check this example, i was able to change labels colours on your jsfiddle. here's whole options parameter:

检查这个例子,我能够改变你的jsfiddle上的标签颜色。这是整个选项参数:

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'
         }            
      }
   },
});

#2


3  

almost every option in high charts can have style applied to it, like I have done to the y-axis in this example:

几乎高图表中的每个选项都可以应用样式,就像我在此示例中对y轴所做的那样:

http://jsfiddle.net/h3azu/

http://jsfiddle.net/h3azu/

I would also recommend going to this page,

我还建议你去这个页面,

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

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

and clicking "view options" to get an idea of other ways the 'style' option can be used to color text.

然后单击“查看选项”以了解“样式”选项可用于为文本着色的其他方式。

#3


1  

Looking through the highcharts.src.js you can style the individual elements for example I changed chart in your example to title and the color is picked up;

通过highcharts.src.js,您可以设置单个元素的样式,例如我将示例中的图表更改为标题并拾取颜色;

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

#1


34  

check this example, i was able to change labels colours on your jsfiddle. here's whole options parameter:

检查这个例子,我能够改变你的jsfiddle上的标签颜色。这是整个选项参数:

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'
         }            
      }
   },
});

#2


3  

almost every option in high charts can have style applied to it, like I have done to the y-axis in this example:

几乎高图表中的每个选项都可以应用样式,就像我在此示例中对y轴所做的那样:

http://jsfiddle.net/h3azu/

http://jsfiddle.net/h3azu/

I would also recommend going to this page,

我还建议你去这个页面,

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

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

and clicking "view options" to get an idea of other ways the 'style' option can be used to color text.

然后单击“查看选项”以了解“样式”选项可用于为文本着色的其他方式。

#3


1  

Looking through the highcharts.src.js you can style the individual elements for example I changed chart in your example to title and the color is picked up;

通过highcharts.src.js,您可以设置单个元素的样式,例如我将示例中的图表更改为标题并拾取颜色;

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