使用 CSS/JavaScript 更改 Kendo Chart 工具提示文本颜色
Posted
技术标签:
【中文标题】使用 CSS/JavaScript 更改 Kendo Chart 工具提示文本颜色【英文标题】:Change Kendo Chart tooltip text color using CSS/JavaScript 【发布时间】:2015-06-11 14:16:15 【问题描述】:我的图表工具提示的所有文本颜色都是黑色的,这与我的图表颜色不匹配。我一直在尝试使用 CSS 将颜色更改为白色,但不知何故它并没有改变。
我正在寻找一种将颜色应用于我屏幕上的所有图表的解决方案。
检查其中一个工具提示的元素来源,向我展示了这一点:
<div class="k-tooltip k-chart-tooltip" style="font: 12px/normal Arial,Helvetica,sans-serif; border: 1px solid rgb(255, 0, 0); border-image: none; left: 497px; top: 368px; position: absolute; font-size-adjust: none; font-stretch: normal; opacity: 1; background-color: rgb(255, 0, 0);">70.25%</div>
我尝试了一些方法,例如:
.k-chart .k-tooltip
color: white !important;
.k-tooltip.k-chart-tooltip
color: white !important;
.k-chart-tooltip
color: white !important;
【问题讨论】:
您可以在 jQuery 中设置颜色,参见示例jsfiddle.net/nmcLh0x1/1。如果您将 MVC 包装器用于 kendo-chart,则还可以使用工具提示选项。 我需要一些我可以设置一次的东西,之后它会应用于我页面上的所有图表,所以我不想为每个图表设置相同的工具提示选项。我想 JQuery 脚本可以工作,但我无法从这里访问 JSFiddle.net。 【参考方案1】:使用 CSS,为样式设置此类
.k-tooltip,.k-chart-tooltip
color: white;
或者
使用 jQuery,您可以设置 kendo 图表工具提示颜色,您可以使用 mvc wrapper JSFiddle
function createChart()
$("#chart").kendoChart(
title:
text: "Title"
,
legend:
position: "bottom"
,
chartArea:
background: ""
,
seriesDefaults:
type: "line",
style: "smooth"
,
series: [
name: "Series1",
color: "red",
data: [50, 100]
,
name: "Series2",
color: "blue",
data: [null, 100, 150]
],
valueAxis:
labels:
format: "0:c"
,
line:
visible: false
,
axisCrossingValue: -10
,
categoryAxis:
categories: [2002, 2003, 2004],
majorGridLines:
visible: false
,
tooltip:
visible: true,
font: "0.8em Segoe UI",
template: "#= series.name #: #= value #",
color: "white"
);
$(document).ready(createChart);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="example">
<div class="demo-section k-content">
<div id="chart"></div>
</div>
</div>
【讨论】:
我实际上正在寻找一个 jQuery 脚本(或 CSS)来更新页面上所有图表的工具提示颜色。我不想为每个图表手动设置颜色,因为我有太多的颜色。【参考方案2】:function createChart()
$("#chart").kendoChart(
title:
text: "Title"
,
legend:
position: "bottom"
,
chartArea:
background: ""
,
seriesDefaults:
type: "line",
style: "smooth"
,
series: [
name: "Series1",
color: "red",
data: [50, 100]
,
name: "Series2",
color: "blue",
data: [null, 100, 150]
],
valueAxis:
labels:
format: "0:c"
,
line:
visible: false
,
axisCrossingValue: -10
,
categoryAxis:
categories: [2002, 2003, 2004],
majorGridLines:
visible: false
,
tooltip:
visible: true,
template: "#= series.name #: #= value #",
);
$(document).ready(createChart);
.k-tooltip,.k-chart-tooltip
color: white;
font-size: 20px !important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="example">
<div class="demo-section k-content">
<div id="chart"></div>
</div>
</div>
【讨论】:
以上是关于使用 CSS/JavaScript 更改 Kendo Chart 工具提示文本颜色的主要内容,如果未能解决你的问题,请参考以下文章
单击时更改字体真棒图标的颜色:CSS / JavaScript
HTML / CSS / Javascript - 将鼠标悬停在不同的单元格上时更改一个表格单元格的值
无需重启服务器即可更改静态内容(html、css、JS) Wildfly 8