jQPlot 饼图 - 如何更改饼图切片标签的文本颜色

发布于 2024-12-05 03:22:38 字数 69 浏览 0 评论 0原文

我正在使用 jQPlot 绘制饼图。

如何更改每个饼图切片上显示的文本颜色?似乎没有一个选项可以做到这一点。

I am using jQPlot to draw a pie chart.

How can I change the color of the text that appears on each pie slice? There does not appear to be an option to do this.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

一人独醉 2024-12-12 03:22:38

修改分布式 jqplot CSS 文件并不是一个好主意,因为这会导致可维护性较差(如果您或其他任何人升级,则必须重新应用更改)。

相反,我建议使用 CSS 特异性规则覆盖 CSS(请参阅 星球大战版本)。

例如,假设

<div id='myChart'; style="width:400px;height:300px;background-color:#eedd33">
</div>

您可以定义 CSS 规则

#myChart
{
    color: Teal;
}

It is not really a good idea to modify the distributed jqplot CSS file, because that makes for poor maintainability (you have to re-apply your changes if you, or anyone else, ever upgrades).

Instead, I recommend overriding the CSS using CSS Specificity Rules (see the Star Wars Version).

For example, given

<div id='myChart'; style="width:400px;height:300px;background-color:#eedd33">
</div>

You could define a CSS rule

#myChart
{
    color: Teal;
}
独留℉清风醉 2024-12-12 03:22:38

您不想修改给定的 CSS 文件,因为它将修改该库的所有使用。

您不想为整个图表容器创建 CSS 规则,因为它还会将颜色应用于将继承它的任何图例或其他文本。

相反,只需修改 jqplot 用于其数据标签的类: .jqplot-data-label

使用:

$('.jqplot-data-label').css("color","white");

这样,只有数据标签会改变颜色。所有其他文本(例如图例标签)都不会更改。

You don't want to modify the given CSS file as it will modify all uses of the library.

You don't want to create a CSS rule for the entire chart container, as it will also apply the color to any legend or other text that will inherit it.

Instead, just modify the class jqplot uses for its data labels: .jqplot-data-label

Use this:

$('.jqplot-data-label').css("color","white");

This way, only the data labels will change color. All other text such as legend labels will not be changed.

凝望流年 2024-12-12 03:22:38

最后,我只是修改了影响所有文本的顶级 jqplot css(因为我希望它具有相同的颜色)。

In the end I just modified the top-level jqplot css that affects all text (as I wanted it all the same colour anyway).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文