如何更改 Primefaces/jqPlot 折线图的标签颜色？答案

【问题标题】：How to change the label color of a Primefaces/jqPlot line chart?如何更改 Primefaces/jqPlot 折线图的标签颜色？
【发布时间】：2012-06-14 07:21:04
【问题描述】：

我有一个使用 PrimeFaces（通过 jqPlot）库的简单 JSF 折线图：

<p:lineChart id="linear"
             value="#{team.chart}" 
             title="Lap Times" 
             xaxisLabel="Lap"
             yaxisLabel="Time (sec)"
             style="height:300px;width:600px" />

但是，我想更改图表的标题和 X/Y 标签颜色。我似乎找不到合适的 CSS 组合来实现这一点。例如，以下内容不起作用：

.jqplot-xaxis {
     /* skin */
     font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; 
     color: white ! important;
     font-size: 90%;
 }

有什么想法吗？

【问题讨论】：

标签： css jsf primefaces jqplot

【解决方案1】：

这正是我用于图表标题和 X/Y 标签的内容：

.jqplot-title{
    color: #eeffdd;
}
.jqplot-xaxis-label{
    color: #eeccaa; 
}
.jqplot-yaxis-label{
    color: #eeccaa;
}

.jqplot-xaxis 类的设置工作正常，它只会改变 xaxis 的刻度。您可以通过设置例如快速测试它font-size: 20px;

【讨论】：

几乎！标题现在具有正确的颜色，但 X 和 Y 标签没有改变（颜色或字体大小测试）。但是，tic-labels 会被上述设置更改...
我猜你在标签上使用CanvasAxisLabelRenderer，对吧？如果是这样，那么在这种情况下，您需要通过设置 labelOptions 显式重复选项，如下所示：labelOptions: {textColor: '#eeccaa'}
好的 - 我对这个 webapp 的东西很陌生......你是指在 CSS 文件中这样做吗？当我将您的建议粘贴到文件中的各种逻辑位置时，我的 IDE 会抱怨。也许您可以为新手详细说明一下……谢谢！绝对进步！
不在 CSS 中。将其添加到您的图表选项中。 PS：我习惯于直接使用 jqPlot，所以我可以完全控制它我不知道如何在 primefaces 中设置它。为什么不在 jsfiddle.net 上构建一个工作示例，以便我们可以从那里一起工作？
好的——看起来 PrimeFaces 还没有把所有的钩子都放到 jqPlot 中。看起来可能需要一些 JS 摆弄......

【解决方案2】：

正如 Boro 在他的 cmets 中对他上面的回答所说明的那样，在使用 CanvasAxisLabelRenderer 时，您需要使用：

labelOptions: {textColor: '#eeccaa'}

在 xaxis 或 yaxis 对象块中（您引用 labelRenderer 的同一位置）：

yaxis:{
  label: 'Your Label'
  labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
  labelOptions: {textColor: '#eeccaa'},
  etc...
}

只是认为最好突出显示这一点而不是将其隐藏在评论中。

谢谢博罗！

【讨论】：

【解决方案3】：

我的工作代码

 axes: {
     xaxis: {
          borderColor: "#aa2626",
          tickOptions: {
             textColor: '#aa2626'
             }
          }
        }

【讨论】：