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

Question

我有一个使用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%;
 }

有什么想法？

- smagrath

Answer 1

这正是我在图表标题和X/Y轴标签中使用的内容：

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

.jqplot-xaxis 类的设置非常好用，只会更改 x 轴的刻度。你可以通过设置例如 font-size: 20px; 来快速测试。

- Boro

---

几乎了！标题现在有正确的颜色，但是X和Y标签没有改变（无论是颜色还是字体大小）。然而，上述设置已更改刻度标签... - smagrath

让我猜猜，你正在使用 CanvasAxisLabelRenderer 在标签上，对吗？如果是这样的话，那么在这种情况下，你需要通过设置 labelOptions 明确地重复选项，像这样：labelOptions: {textColor: '#eeccaa'}。 - Boro

好的 - 我对这个Web应用程序一窍不通...你是指在CSS文件中进行这个操作吗？当我将您的建议粘贴到文件的各个逻辑位置时，我的IDE会发出警告。也许您可以为新手详细解释一下...谢谢！有了明显的进展！ - smagrath

我认为应该如此，看一下primefaces关于p:lineChart的标签文档让我想到他们必须使用CanvasAxisLabelRenderer，因为它们提供了xaxisAngle和yaxisAngle，这正好是这个渲染器允许旋转的，假设这些是标签的角度，可惜文档没有说明。 - Boro

为了证明CanvasAxisLabelRenderer需要在labelOptions中指定文本颜色，请参见http://jsfiddle.net/Boro/ZbHsD/10/。尝试使用示例，例如注释掉`labelOptions`以查看颜色是否丢失。 - Boro

Answer 2

正如Boro在他上面的回答中所示，当使用CanvasAxisLabelRenderer时，您需要使用：

labelOptions: {textColor: '#eeccaa'}

在x轴或y轴对象块中（与您引用的labelRenderer相同的位置）：

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

我认为突出这一点比将其隐藏在评论中要好。

谢谢Boro！

- Zuckerj

Answer 3

为了我的工作，这段代码

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

- Yitzhak Weinberg

Answer 4

对于我来说，因为我正在处理一个旧项目Primefaces 6.2，适用于我的代码如下：

  this.cfg.axesDefaults= {
                tickOptions: {
                    textColor: '#fff'
                }
            };

注意：此代码部分位于扩展函数内，该函数设置如下所示：

model.setExtender("linechartExtender");

然后在XHTML文件中添加JavaScript函数：

  <h:outputScript >
        function linechartExtender() {
           
            this.cfg.axesDefaults= {
                tickOptions: {
                    textColor: '#fff'
                }
            };

            
        }
       linechartExtender();
    </h:outputScript>

- Alhessan